个人中心
gpt4 book ai didi

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

转载 作者：搜寻专家 更新时间：2023-10-31 08:22:55 25 4
gpt4 key购买 nike

<分区>

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

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

25 4 0
文章推荐： java - 重新加载 java 类中的静态字段
文章推荐： ios - Swift xcode 错误 : Thread 1: EXC_BAD_ACCESS (code=2, 地址=0x7ff54b59ff8)
文章推荐： java - 使用默认 Java Logging API 的 SimpleFormatter 的默认参数是什么？
文章推荐： 为 REST 服务创建客户端 stub 的 java 工具
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com