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

我想在另一个图像上显示梯度图像，但在另一个图像上没有显示梯度图像。我的代码如下：

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

.飞溅梯度
{
背景图片：url（'images/gradient.png'）；
背景位置：左；
背景重复：重复-y；
浮动：对；
高度：300px；
宽度：362px；
}

避免将空标记仅用于样式设置。您可以只向现有标记添加一个类

<div class="col-md-6 splash-gradient"> 
  <img src="images1.jpg" />
</div>

---

渐变插入到

：在
伪元素之前，由于处于
位置：绝对
它与图像重叠（当然可以随意调整宽度和高度）
这不是假设图像完全填充div吗？否则会有一个比图像更大的梯度。我认为这是最佳答案……但是……没错，但他可以轻松调整psuedoelement的高度和/或宽度。因为没有一个可用的例子可以看，这只是一个好的建议…顺便说一句，你能硬编码
px
值吗，我倾向于将宽度和高度设置为100%
.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;   
}