gpt4 book ai didi

css - 引导容器中的响应式背景图像

转载 作者:行者123 更新时间:2023-12-05 00:48:01 24 4
gpt4 key购买 nike

我正在使用多个容器,因此我可以在其中拥有独特的透明图像。

我希望它们中的背景图像具有响应性并保持比例,我发现很多建议放置 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>

最佳答案

如果您希望根据浏览器窗口的大小缩放相同的图像,那么这里是代码。

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

不要设置宽度、高度或边距。

关于css - 引导容器中的响应式背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54156531/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com