html - 我在容器背景和前景中有 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% 缩放到父级的宽度，并使用 保持其纵横比自动。

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

我所做的唯一更改是 .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 应用到 main-title entry-title 元素的父级 container

3) 将 position:relative 应用到具有 stretch_full container_wrap alternate_color light_bg_color title_container 类的 container 元素的父级

附言欢迎来到 stackoverflow :)