css 为什么我不能设置一个div的背景图像的不透明度？

b09cbbtk 于 2022-12-15 发布在其他

关注(0)|答案(1)|浏览(232)

我有一个组件列表，显示为网格状，如下所示：

所以，每一项都是一个组件，缩略图只是我在html中动态设置的背景图像。
当鼠标悬停在它们上面时，一些文本会出现在那个框上。背景图像会保留。现在我的目标是给予背景图像一些不透明性。听起来很容易，但我不知道如何实现这一点，我已经尝试了其他帖子中的几种方法。
下面是我的相关html代码：

<div
  *ngIf="!isFile()"
  class="image-container"
  (mouseenter)="onMouseHover()"
  (mouseleave)="onMouseLeave()"
  (click)="onDokumentClick()"
  [style.background-image]="'url(' + thumbnailPathGenerator() + ')'"
>

这就是我的scss：

.image-container {
  border-radius: 4px;
  background-repeat: no-repeat;
  background-position: center center;
  box-sizing: border-box;
}

.image-container:hover {
  border-radius: 4px;
  box-sizing: border-box;
}

URL在模板中生成，这是一个挑战...
我如何设置图像背景的不透明度？

css

来源：https://stackoverflow.com/questions/74771588/why-cant-i-set-opacity-to-background-image-of-a-div

1条答案

按热度按时间

xe55xuns1#

在直接的JS、HTML、CSS中，它可能是这样的--CSS变量--bg被设置为背景图像URL，可以通过伪元素样式化来获取：

const div = document.querySelector('.image-container');

function thumbnailPathGenerator() {
  return 'https://picsum.photos/id/1015/150/150';
}
div.style.setProperty('--bg', 'url(' + thumbnailPathGenerator() + ')');

.image-container {
  border-radius: 4px;
  box-sizing: border-box;
  position: relative;
}

.image-container::before {
  content: '';
  background-image: var(--bg);
  background-repeat: no-repeat;
  background-position: center center;
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.image-container:hover::before {
  border-radius: 4px;
  box-sizing: border-box;
  opacity: 0.4;
}

<div class="image-container" style="width: 50vmin; height: 50vmin;"></div>

我自己不使用angular，但我相信你现在（从版本9开始）可以像这样设置一个CSS变量：

<div
  *ngIf="!isFile()"
  class="image-container"
  (mouseenter)="onMouseHover()"
  (mouseleave)="onMouseLeave()"
  (click)="onDokumentClick()"
  [style.--bg]="'url(' + thumbnailPathGenerator() + ')'">
>

注意：我不知道你的mousenter和out函数是做什么的。如果你有CSS处理的不透明性，它们是必要的吗？

赞(0）回复(0）举报 2022-12-15

我来回答

css 为什么我不能设置一个div的背景图像的不透明度？

1条答案

相关问题

热门标签

最新问答