使用 CSS 使背景图像透明

发布于 2024-10-31 15:42:27 字数 135 浏览 4 评论 0原文

我有一个场景,我需要透明背景图像,但我无法控制我使用的动态生成的图像。因此,透明 PNG 是不可能的。同一 div 内的所有子元素不应受到影响,并且应完全可见。

我知道如何将透明度应用于背景颜色和块级元素,但是您可以对背景图像执行此操作吗?

I have a scenario where I need a transparent background image but I have no control over the dynamically generated images I use. For that reason Transparent PNG is out of the question. All child elements within the same div should NOT be effected and should be fully visible.

I know how to apply transparency to background colours and block level elements but can you do this for a background image?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

鹿港巷口少年归 2024-11-07 15:42:28

设置具有背景的元素的不透明度是一个好的开始,但是您会看到不透明度发生更改的元素中的任何元素也将是透明的。

解决方法是使用一个包含背景且透明的元素 (opacity:0.6; filter:alpha(opacity=60)),然后将包含实际内容的容器浮动或定位在上面它。

以下是此方法的工作原理示例:

#container {
    width: 200px;
    postiion: relative;
  }
  
  #semitrans {
    width: 100%; height: 100px;
    background: #f00;
    opacity: 0.6;
    filter:alpha(opacity=60);
  }
  
  #hello {
    width: 100%; height: 100px;
    position: absolute;
    top: 20px; left: 20px;
  }
  
<div id="container">
    <div id="semitrans"></div>
    <p id="hello">Hello World</p>
</div>

Setting the opacity of the element with the background is a good start, but you'll see that any elements within the one whose opacity is changed will also be transparent.

The way around that is to have an element that contains the background and is transparent (opacity:0.6; filter:alpha(opacity=60)), and then float or position the container with the actual content over it.

Here's a sample of how this approach would work:

#container {
    width: 200px;
    postiion: relative;
  }
  
  #semitrans {
    width: 100%; height: 100px;
    background: #f00;
    opacity: 0.6;
    filter:alpha(opacity=60);
  }
  
  #hello {
    width: 100%; height: 100px;
    position: absolute;
    top: 20px; left: 20px;
  }
  
<div id="container">
    <div id="semitrans"></div>
    <p id="hello">Hello World</p>
</div>

迟月 2024-11-07 15:42:28

不,从技术上讲不是。您必须应用背景颜色才能使其正常工作,因为您将褪色颜色和图像,而不仅仅是图像。请记住,背景图像不是可设置样式的内容。

您可能可以通过使用图像而不是背景图像来破解它,并且混合了相对和绝对定位,并在顶部添加了一些 z 索引。但这是我能想到的唯一办法!

No. Not technically. You'd have to apply a background-color in order to get this to work because you'd be fading the color and image, rather than just the image. Remember that a background image is not styleable content.

You could probably hack it by using an image instead of a background image and there a mixture of relative and absolute positioning with some z-indexing on top. But that's the only way I can think of!

满栀 2024-11-07 15:42:28

IE 使用 filter:alpha(opacity=50); 而其他浏览器则使用 opacity:.5

只需将它们都包括在内即可。

IE uses filter:alpha(opacity=50); while others use opacity:.5

Just include them both.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文