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

Posted 2023-03-06

【中文标题】在角度和 scss 中悬停时更改背景图像不透明度

【英文标题】：Change background image opacity on hover in angular and scss

【发布时间】：2021-11-21 05:02:11

【问题描述】：

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

  <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。

【问题讨论】：

这能回答你的问题吗？ How do I give text or an image a transparent background using CSS?

【参考方案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;
  

  // ...

【讨论】：

这行得通！但现在淡入淡出的动画停止工作