html - 添加阴影 block

Question

你好，我有几个带有图像和文本的 li 元素(图像上的文本)，我想在图像上添加阴影(我想要深色图像和普通文本)

我的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>

我的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;
}

所以我尝试将带有“阴影”类的 div 添加到 li 元素

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

并使用CSS

.shade{
    background-image: linear-gradient(to bottom, transparent 0, #000000 130%);
    background-repeat: repeat-x;
}

但是没用

Answer 1

这是一个使用背景图像和伪元素的示例。

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