问题描述:

I have a div that contains a thumbnail image of an article. I would like to add a gradient overlay to this image. My problem is that the gradient is set in the css file and the background image is set in the html within a style attribute of the element. So the background-image attribute in the html style overrides the gradient of the css file.

I have to do it this way because the url of the thumbnail image is stored in a database. Otherwise, I would just set both the gradient and the image in the css file something like this: background-image: url(...), linear-gradient(...) If I used an img tag that would just cover the gradient anyway.

I would rather not define the gradient in the HTML style attribute. Are there any better ways to do this? Here is a jsFiddle. Thanks for your time.

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

网友答案:

I think you will need a pseudo for that, as when you assign them separate, they will delete one or the other, based on which has priority.

Updated fiddle

Snippet sample

.card-row-image {
  position: relative;
  margin-bottom: 25px;
}

.card-row-image:after {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  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>
网友答案:

set your gradient code in after or before of class card-row-image

.card-row-image::after{position: absolute;content: "";Ttop: 0;right: 0;left: 0;bottom: 0;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%);}


.card-row-image{
    position: relative;
}
相关阅读:
Top