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>