如何在图像上创建颜色叠加？ [重复]

Question

这个问题在这里已有答案：

• Color overlay on hover image 6个答案

我在每个面板上都有一个手风琴图像。我希望在每张图片的顶部都有一个蓝色叠加层。我怎么能做到这一点？

CSS .panel-img的最后一部分是它会去的地方（我认为）

这是我的codepen

 <div class="slider-containers">
<div class="slider-container">
  <div class="flexbox-slider flexbox-slider-1">
    <div class="flexbox-slide">
      <img src="https://images.pexels.com/photos/1464213/pexels-photo-1464213.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=500" alt="Slide Image" class="panel-img">
      <div class="start">Engage</div>
      <div class="text-block">
        <h3>Engage</h3>
        <div class="text">
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
        </div>
      </div>
    </div>
    <div class="flexbox-slide">
      <img src="https://images.pexels.com/photos/1350615/pexels-photo-1350615.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=500" alt="Slide Image"  class="panel-img">
      <div class="text-block">
        <h3>Educate</h3>
        <div class="text">
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
        </div>
      </div>
    </div>
    <div class="flexbox-slide">
      <img src="https://images.pexels.com/photos/1093913/pexels-photo-1093913.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=500" alt="Slide Image" class="panel-img">
      <div class="text-block">
        <h3>Empower</h3>
        <div class="text">
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
        </div>
      </div>
    </div>
  </div>
</div>    

//variables
$slider-height: 500px;
$text-block-width: 400px;

$dark-font-color: #212121;
$accent-font-color: #CA9CE1;
$light-font-color: #fff;
$text-overlay-color: #000;
$text-overlay-opacity: 0.6;
$slide-overlay-color: #fff;
$slide-overlay-opacity: 0.6;

//transitions and mixins

//transitions mixin
@mixin transition-mix($property: all, $duration: 0.2s, $timing: linear, $delay: 0s) {
  transition-property: $property;
  transition-duration: $duration;
  transition-timing-function: $timing;
  transition-delay: $delay;
}

//position absolute mixin
@mixin position-absolute ($top: null, $left: null, $right: null, $bottom: null) {
  position: absolute;
  top: $top;
  left: $left;
  right: $right;
  bottom: $bottom;
}

/*common styles !!!YOU DON'T NEED THEM */


.container {
  width: 1100px;
  margin: 50px auto 0;


}

  .link {
    display: flex;
    justify-content: center;
    width: 800px;
    margin: 30px auto 0;

    a {
      @include transition-mix;

      display: flex;
      align-items: center;
      flex-shrink: 0;
      margin-right: 40px;
      color: inherit;
      font: {
        size: inherit;
      }
      text-decoration: none;

      &:hover {
        color: $accent-font-color;
      }

      &:last-child {
        margin-right: 0;
      }

      i {
        color: $accent-font-color;
        margin-right: 9px;
        font-size: 30px;
      }
    }
  }

.slider-containers {
  width: 100%;
  margin: 60px  ;
}

.slider-container {
  margin-bottom: 60px;

  h2 {
    text-align: center;
  }
}

.flexbox-slider {
  margin-top: 50px;
}

/*slide styles !!!YOU NEED THEM */
.flexbox-slider {
  display: flex;
  width: 100%;
  height: $slider-height;
  visibility: hidden;

  .flexbox-slide {
    @include transition-mix($duration: .3s);

    width: 33%;
    height: 100%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    visibility: visible;
    transform: skewx(-8deg);

    //overlay
    &:after {
      @include position-absolute($top: 0, $left: 0);
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background-color: rgba($slide-overlay-color, $slide-overlay-opacity);
      z-index: 2;

      opacity: 0;
    }

    img {
      @include position-absolute($top: 50%, $left: 50%);
      height: auto;
      width: auto;
      min-width: 100%;
      min-height: 100%;
      transform: translate(-50%, -50%);
      z-index: -1;
    }

    .text-block {
      @include position-absolute($bottom: 30px, $left: 30px);
      max-width: $text-block-width;
      padding: 20px;
      border-radius: 5px;
      background-color: rgba($text-overlay-color, $text-overlay-opacity);
      color: $light-font-color;

      z-index: 4;

      visibility: hidden;
      opacity: 0;

      h3 {
        font: {
          size: 20px;
          weight: 700;
        }
      }
    }
  }

    &:hover {

    .flexbox-slide:hover {
      flex-shrink: 0;
      width: 80%;
    }
  }
}

/* effect  */
.flexbox-slider.flexbox-slider-1 {

  .flexbox-slide {

    .text-block {
      bottom: 60px;
    }
  }

  &:hover {

    .start {visibility:hidden}

    .flexbox-slide:hover {

      .text-block {
        @include transition-mix($delay: .5s);
        bottom: 30px;
        opacity: 1;
        visibility: visible;
      }
    }
  }
}
.start {font-weight: bold; color: black; font-size: 150%; z-index:1000; margin: 50px; 
}
.start:hover {color: green}
.panel-img {backgroud-color: rgba(0,0,255,.8)}
img.panel-img {height:500px !important; }

Answer 1

您可以使用div标签包装图像选项卡，并使用蓝色的rgba代码设置背景颜色[例如。 rgba（34,167,240，.5）]通过改变rgba的最后一个值来设置颜色的不透明度。

<div class="img-overlay">
   <img src="https://images.pexels.com/photos/1093913/pexels-photo-1093913.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=500" alt="Slide Image" class="panel-img">
</div>


.img-overlay {
  width: 100%;
  height: 100%;
  background: rgba(34, 167, 240, .5);
}