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

问题描述

我有一个手风琴，每个面板都有图像。我想在每张图片上都有一个蓝色的叠加层。我怎样才能做到这一点？

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

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

标签： htmlcssaccordion

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

问题描述

解决方案

推荐阅读