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

Question

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

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

将鼠标悬停在 .picture class 上后。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/ 的解决方案，但我不知道如何在这种情况下使用它：悬停。

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

  // ...
}

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

Change background image opacity on hover in angular and scss

sass

background-image

hover

opacity

angular