时间戳

首页 > 解决方案 > CSS：带有嵌套图像的蒙版正在继承不透明度

html - CSS：带有嵌套图像的蒙版正在继承不透明度

问题描述

我正在为视频容器创建一个蒙版，这样当您将鼠标悬停在它上面时，它是一个黑色蒙版，里面有一个播放/暂停按钮。问题是箭头嵌套在maskdiv 内，该 div 上有不透明度，因此嵌套img继承了该不透明度。我尝试更改opacity为background: rgba(255,255,255,0.5)在其他解决方案中找到的内容，但这似乎不起作用，因为背景似乎被视频隐藏了。我没主意了。 

<div class="video-container>
  <video src="video.mp4"></video>
  <div class="mask>
      <img class="arrow" src="arrow.png" />
   </div>
</div>

CSS

.video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-right: 50px;
    flex-direction: column;
    img {
        position: absolute;
        z-index: 555;
        &:hover {
            cursor: pointer;
        }
    }
    .mask {
        width: 100%;
        height: 100%;
        position: absolute;
        background: #000;
        opacity: 0.0;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: opacity 0.7s ease;
        &:hover {
            transition: opacity 0.7s ease;
            opacity: 0.5;
            cursor: pointer;
        }
    }
}

标签： htmlcsssass

解决方案

两种不同的背景呢？一个用于面具，另一个用于箭头： 我在这里试了一下

.video-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-right: 50px;
  flex-direction: column;

  img {
    position: absolute;
    z-index: 555;

    &:hover {
      cursor: pointer;
    }
  }
  img.arrow {
    width:20px;
    heigth:20px;
  }

  .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover .bg-mask {
        transition: opacity 0.7s ease;
        opacity: 0.5;
    }
    &:hover .bg-arrow {
        transition: opacity 0s ease;
        opacity: 1;
    }
    .bg-mask {
      position:absolute;
      width: 100%;
      height: 100%;
      background: #000;
      transition: opacity 0.7s ease;
      opacity: 0.0;

    }
    .bg-arrow {
      position:absolute;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: opacity 0s ease;
      opacity: 0.0;
    }
  }
}

推荐阅读