Question

我想在另一幅图像上显示渐变图像，但渐变图像未显示在另一幅图像上。我的代码如下：

<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>

Answer 1

避免仅为造型目的使用空标记。你可以在existant markup中添加一个类

<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中与图像重叠（当然可随意调整宽度和高度）

使用css和html在另一个图像上显示渐变图像

1 个答案: