html - CSS - 带有透明图像的部分

Question

有人可以解释一下，我是如何在下图中做这样的事情的？它是 HTML、CSS 中的一个部分，但带有透明的图像覆盖。

感谢您的帮助！

“下图”

这是指向实时页面的链接。只需点击“预览”：https ://yootheme.com/themes/finch

标签： htmlcssimage

Answer 1

只需添加一个“png”文件图像纹理，并根据您的示例在滑块底部设置为 div 的背景图像。然后为其添加一个负边距顶部。如果滑块与纹理重叠 div 只需添加一个 z-index 值。

.your-div{
background-image:url('your-image.png');
background-repeat:no-repeat;
background-size:cover;
background-position:center-center;
margin-top:-25px;
}