Question

是否有人使用html添加叠加层以使图像更暗？我尝试使用data-overlay=0.6。但是，没有效果。如果不可能，我可以使用下面的代码吗？

!-- Slide 1 -->
<li data-index="slide-1" data-transition="fade" data-slotamount="1" data-easein="default" data-easeout="default" data-masterspeed="500" data-rotate="0" data-delay="6000">
<!-- Main image -->
<img class="pic_slide_one" src="media/image/slider/audi-black-car-8639.jpg" alt="slide-1" data-bgfit="cover" data-bgposition="center bottom">


  /* Styling and fetching IMG */
  .pic_one_slider {
    background:linear-gradient(0deg,rgba(0,0,0,0.95),rgba(0,0,0,0.95)),url('media/image/slider/audi-black-car-8639.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

Answer 1

您的问题似乎超出了简单的图像覆盖范围。对于单个图像，我的建议是使用import operator op = { "+": operator.add "-": operator.sub "/": operator.truediv "//": operator.floordiv "*": operator.mul "**": operator.pow "%": operator.mod } print(op["+"](2, 3)) div，以便您可以根据需要叠加（颜色，其他图片等）

想法是：

一个容器position: absolute。容器在这里div的位置，以便采用display: inline-block子级的宽度和高度。如果您的容器有完整宽度，则可以跳过此步骤
img本身
一个空的img进行覆盖。可以通过多个选项完成覆盖：
- 如果是单色，则可以使用div，其中background: rgba(0, 0, 0, 0.5)是不透明
- 在0.2中放入所需内容，然后使用div

这里是一个例子：

opacity: 0.5

.darken-img{
  /* to make absolute children depending on this parent */
  position: relative;
  /* to make parent div adapt to img width/height*/
  display: inline-block;
}

.darken-img img{
  height: 400px;
}

.darken-img .darkener{
  /* to go overlay the img */
  position: absolute;
  top: 0;
  /* to cover the whole img */
  height: 100%;
  width: 100%;
  /* make your choice here */
  background: rgba(0,0,0,0.6);
}

Answer 2

您可以尝试降低不透明度。根据您的图片和预期结果，这可能就足够了：

 .pic_one_slider {
   opacity: 0.8;
 }

Answer 3

如果不访问其中包含的所有CSS，这很难回答，但这就是我要做的。您可以尝试将图像与具有相同图像宽度和高度的div重叠，并将background-color属性设置为black，然后设置该div的opacity值

请注意z-index的用法，它需要设置position属性。在此示例中，我将其设置为absolute。

  .overlay {
    background-color: black;
    width: 600px;
    height: 400px;
    z-index: 2;
    position: absolute;
    opacity: 0.8;
  }

和

<div class="overlay"></div><img class="pic_slide_one" src="https://www.w3schools.com/w3css/img_lights.jpg" alt="slide-1" data-bgfit="cover" data-bgposition="center bottom" style="z-index:1;position: absolute;">

很明显，您可以在其他位置的img类中包括样式，例如在pic_slide_one类中。

有没有一种方法可以使用html添加叠加层以使图像更暗？

3 个答案: