我想在另一幅图像上显示渐变图像,但另一幅图像上没有显示渐变图像。我的代码如下:
<style>
.splash-gradient
{
background-image: url('images/gradient.png');
background-position: left;
background-repeat: repeat-y;
float: right;
height: 300px;
width: 362px;
}
</style>
<div class="col-md-6"> <img src="images1.jpg" /></div>
<div id="gradient-background" class="splash-gradient"></div>
最佳答案
避免仅出于样式目的使用空标记。您可以只向现有标记添加一个类
<div class="col-md-6 splash-gradient">
<img src="images1.jpg" />
</div>
然后使用这种风格:
.splash-gradient {
position: relative;
}
.splash-gradient:before {
content: "";
position: absolute;
top: 0;
left: 0;
background: url('images/gradient.png') top left repeat-y;
height: 300px;
width: 362px;
}
渐变被插入到 :before
伪元素上,因为它位于 position: absolute
中,所以它与图像重叠(当然可以随意调整宽度和高度)
关于html - 使用 css 和 html 在另一个图像上显示渐变图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23268098/