在角度和 scss 中悬停时更改背景图像不透明度

Question

我有从服务器获取的动态背景图像的角度组件：

  <div
    class="picture"
    [style.background-image]="'url(' + this.category.photo + ')'"
  >
    <div class="seeDetails">
        join group
      <button>see details</button>
    </div>
  </div>

将鼠标放在 .picture 类 .seeDetails 上后会出现文本和按钮，在 CSS 中如下所示：

.picture {
  width: 400px;
  height: 300px;
}

.seeDetails {
  display: none;
}

.picture:hover {
opacity:0.2;
  .seeDetails {
    display: block;
    animation-name: fadeIn;
    animation-duration: 0.5s;
  }

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

我想在悬停后将背景图像不透明度设置为 0.2，但它也将文本和按钮不透明度设置为 0.2。

我已经阅读了关于伪元素 ::before https://coder-coder.com/background-image-opacity/ 的解决方案，但我不知道在这种情况下如何使用 :hover。

Answer 1

（有a little bit simpler solution 和::before/::after，但您必须将动态背景 url 移动到 css 才能使其工作。）

你应该有：

<div class="container">
    <div class="background" [style.background-image]="'url(' + this.category.photo + ')'">
    </div>
    <div class="seeDetails">
        join group
      <button>see details</button>
    </div>
</div>

div.container {
  position: relative;

  > div.background {
    position: absolute;
    inset: 0;
    background-size: cover;
  }

  &:hover > div.background {
     opacity: 0.2;
  }

  > div.seeDetails {
    display: block;
    animation-name: fadeIn;
    animation-duration: 0.5s;
  }
}

注意：inset 并非在任何地方都有效。你应该创建一个 mixin：

@mixin inset($size: 0) {
    inset: $size;
    top: $size;
    left: $size;
    right: $size;
    bottom: $size;
}

并将其用作：

div.container {
  // ...

  > div.background {
    position: absolute;
    @include inset(0 !important);
    background-size: cover;
  }

  // ...
}