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

所以我尝试将带有“shade”类的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

以下是使用背景图片和伪元素的示例。

＆＃13;

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

＆＃13;

<li>
  <div class="block-news-textoverlay text-center">
    <h2>Lorem ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetu</p>
  </div>
</li>

＆＃13;

添加阴影块

1 个答案: