我正在使用多个容器,因此可以在其中包含唯一的透明图像。
我希望它们中的背景图像能够响应并保持比例,我发现有很多建议可以放入background-size: cover;
,但对我来说不起作用。我无法使图像响应。
我尝试过的方法:
object-fit: contain;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
flex: 1;
css代码:
.container{
display: block;
position: relative;
}
.container1::after {
content: "";
background: url(bg2.jpg);
background-repeat:no-repeat;
background-position: center center;
opacity: 0.3;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
object-fit: contain;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
flex: 1;
}
html:
<div class="container container1">
<p> some text </p>
</div>
答案 0 :(得分:0)
如果您要根据浏览器窗口的大小缩放同一张图片,则代码如下。
Compare <-
compareDF::compare_df(target, source, "Number", stop_on_error =
FALSE)
请勿设置宽度,高度或边距。