问题描述:

Hello I have several li elements with images and text ( text on image ), and I want to add shade over image ( I want to get dark image and normal text )

My html

<li>

<div class="block-news-textoverlay text-center">

<h2>

Lorem ipsum

</h2>

<p>Lorem ipsum dolor sit amet, consectetu</p>

</div>

<img src="1.jpg" alt="">

</li>

My css

.block-news-textoverlay {

transform: translateY(-50%);

text-align: center;

position: absolute;

z-index: 10;

right: 0;

top: 50%;

left: 0;

padding-left: 75px;

padding-right: 75px;

}

So I try to add div with "shade" class to li element

<li>

<div class="shade">

<div class="block-news-textoverlay text-center">

<h2>

Lorem ipsum

</h2>

<p>Lorem ipsum dolor sit amet, consectetu</p>

</div>

<img src="1.jpg" alt="">

</div>

</li>

and use css

.shade{

background-image: linear-gradient(to bottom, transparent 0, #000000 130%);

background-repeat: repeat-x;

}

but it doesn't work

网友答案:

Here's an example using background image and a pseudo element.

.block-news-textoverlay {
  transform: translateY(-50%);
  text-align: center;
  position: absolute;
  z-index: 10;
  right: 0;
  top: 50%;
  left: 0;
  padding-left: 75px;
  padding-right: 75px;
  background: url(http://lorempixel.com/output/nature-q-c-800-800-6.jpg) no-repeat center center;
  background-size: cover;
  color: #fff;
}
.block-news-textoverlay:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}
<li>
  <div class="block-news-textoverlay text-center">
    <h2>Lorem ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetu</p>
  </div>
</li>
相关阅读:
Top