如何在图像上创建颜色叠加层？

Question

我有一个手风琴，每个面板中都有图片。我想在每张图片的顶部添加蓝色叠加层。如何实现这一点？

我认为 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; }

- SnowboardBruin

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

- Marcel Wade