gpt4 book ai didi

html - 背景图片只填充一半的div

转载 作者:行者123 更新时间:2023-11-28 16:29:59 24 4
gpt4 key购买 nike

我有一个设置大小的 div,我需要向其添加背景图像。但是我希望图像填充 div 的宽度但被裁剪以占据 div 高度的三分之一到一半。我已经使用像这样的伪元素来管理它:

<div class="card-wrap bg-img-3"><div class="card">
<div class="top">
<h2 class="white">Heading</h2>
</div>
</div></div>



.bg-img-3:before {
content: '';
position: absolute;
width: 9.4cm;
height: 3cm;
z-index: -1;
background: url("./img/video.png");
}

但是使用这种技术我似乎无法为 div 的下半部分添加背景颜色。

如何在同一个 div 上使用裁剪后的背景图像和背景颜色?

最佳答案

如果你愿意,你可以使用after来设置背景颜色

.bg-img-3:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -2;
background-color: #f00;
}

关于html - 背景图片只填充一半的div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35445122/

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