2
我有一个包含文章缩略图的div。我想添加一个渐变叠加到这个图像。我的问题是渐变设置在CSS文件中，背景图像设置在元素的style属性中的html中。因此，html样式中的background-image属性将覆盖css文件的渐变。如何将渐变叠加添加到在CSS中的样式属性中设置的图像？
我必须这样做，因为缩略图图像的网址存储在数据库中。否则，我只需在css文件中设置渐变和图像，如下所示：background-image: url(...), linear-gradient(...)如果我使用的是只覆盖渐变的img标记。
我不想在HTML样式属性中定义渐变。有没有更好的方法来做到这一点？这是一个jsFiddle。谢谢你的时间。
.card-row-image {
margin-bottom: 25px;
background-image: -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 2%, rgba(0, 0, 0, 0.19) 45%, rgba(0, 0, 0, 0.18) 47%, rgba(0, 0, 0, 0) 78%);
background-image: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 2%, rgba(0, 0, 0, 0.19) 45%, rgba(0, 0, 0, 0.18) 47%, rgba(0, 0, 0, 0) 78%);
background-image: linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 2%, rgba(0, 0, 0, 0.19) 45%, rgba(0, 0, 0, 0.18) 47%, rgba(0, 0, 0, 0) 78%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#00000000', GradientType=1);
}
.thumbnail-default {
position: relative;
text-align: center;
border: 1px solid #badcdd;
}
.thumbnail-default:before {
position: absolute;
font-family: 'FontAwesome';
font-size: 72px;
color: #badcdd;
text-align: center;
padding: 0px;
margin: 0px;
top: 50%;
left: 50%;
transform: translateY(-50%);
transform: translate(-50%, -50%);
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #547b97;
}
.card-row-image {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 200px;
position: relative;
width: 262px;
}
.card-row-label {
background-color: #c2e078;
color: #547b97;
left: 50%;
font-size: 16px;
padding: 6px 15px;
position: absolute;
top: 0px;
font-weight: bold;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
z-index: 2;
}
.card-row-price {
background-color: #547b97;
bottom: 0px;
color: #fff;
font-size: 13px;
left: 50%;
padding: 3px 15px;
position: absolute;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
white-space: nowrap;
z-index: 2;
}<div style="background-image: url(http://placehold.it/262x200);" class="card-row-image">
<div class="card-row-label"><a href="http://mahanap.dev/index.php/categories/restaurants">Restaurants</a>
</div>
<div class="card-row-price">Pennsylvania</div>
</div>
<div class="card-row-image thumbnail-default fa fa-cutlery">
<div class="card-row-label"><a href="http://mahanap.dev/index.php/categories/restaurants">Restaurants</a>
</div>
<div class="card-row-price">Pennsylvania</div>
</div>