У меня есть div, который содержит уменьшенное изображение статьи. Я хотел бы добавить наложение этого градиента. Моя проблема заключается в том, что градиент задается в файле css, а фоновое изображение устанавливается в html в атрибуте стиля элемента. Таким образом, атрибут background-image в стиле html переопределяет градиент файла css.Как добавить наложение градиента к изображению, установленному в атрибуте style в css?
Я должен сделать это так, потому что URL-адрес уменьшенного изображения хранится в базе данных. В противном случае я бы просто установил как градиент, так и изображение в файле 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>