我在容器背景和前景中有 2 个图像。如何使前景图像响应

Question

我有 2 张图片。 1 我已经在背景中设置，另一个显示在该背景图像上方，是响应式的，但是当我将浏览器拖到小时，前景图像出错了。网站链接如下。 https://padovasitiweb.it/test-page/

我已附上代码。我已将前景图像放在 .title_container: 之前，它显示完美但没有响应。

        .title_container:before {
background: url(https://padovasitiweb.it/wp-content/uploads/main-cover_fgg.png) no-repeat center center / cover;
content: '';
top: auto;
position: absolute;
bottom: 7px;
height: 360px;
width: 100%;
left: 0px;
z-index: 5;
text-align: center;
}
.title_container h1.entry-title{
margin-top: 7vw;
margin-bottom: 7vw;
}
@media only screen and (max-width: 767px){
.title_container h1.entry-title, .title_container .entry-title a {
font-size: 8vw !important;
letter-spacing: -1px;
color: #333333!important;
top: 4px;

}
.title_container:before{
    height: 107px!important;    
    bottom: 2px !important;
}

}

我期待有人帮助我找到我在代码中遗漏的内容。我已经为移动设备设置了媒体查询，这很好，但对所有设备都没有响应。当我拖动浏览器时，前景图像应该与背景一样缩短。

Answer 1

cover 背景大小导致了问题。 cover CSS 属性更像是最适合的样式，不适合其父项的宽度。您可以使用百分比来代替background-size: 100% auto;，它将使用100% 缩放到父级的宽度，并使用auto 保持其纵横比。

我还将定位从固定单位更改为百分比，因此它保持在正确的位置。

我所做的唯一更改是.container h1.entry-title:before CSS 属性中的样式。

.container h1.entry-title:before {
    background: url(https://padovasitiweb.it/wp-content/uploads/main-cover_fgg.png) no-repeat center bottom;
    background-size: 100% auto;
    content: '';
    position: absolute;
    top: auto;
    bottom: 1.5%;
    left: 50.6%;
    transform: translateX(-50%);
    height: 100%;
    width: 100%;
    z-index: 5;
    text-align: center;
    display: block;
}

编辑 我认为您在我查看 HTML 时对其进行了更改。当我查看 HTML 时，:before 元素是具有 stretch_full container_wrap alternate_color light_bg_color title_container 类的元素的直接子元素。

如果您保持现在的 HTML，您还需要进行以下 CSS 更改：

1) 将position:static 应用于:before 元素的父级，其类为main-title entry-title

2) 将position:static 应用到类container 的main-title entry-title 元素的父级

3) 将position:relative 应用于container 元素的父级，其类为stretch_full container_wrap alternate_color light_bg_color title_container

附：欢迎来到stackoverflow :)