CSS3的背景图像透明度？

【问题标题】：Background image transparency with CSS3?CSS3的背景图像透明度？
【发布时间】：2017-04-03 18:31:23
【问题描述】：

有没有办法使用 CSS3 为背景图像添加透明度？

【问题讨论】：

增加透明度是什么意思？您想添加 Alpha 通道、将特定颜色转换为 Alpha 通道，还是让整个图像半透明？
创建一个 JSFiddle，以便我们使用示例向您展示如何将其应用到您的代码中。 JSFiddles 让一切变得更容易，当在这里提出 Web 开发问题时，您应该始终使用它。 www.jsfiddle.net
没有必要创建一个 jsFiddle。我只是想知道它是否可能，我实际上并没有用这个。
这就是你想要的css-tricks.com/snippets/css/transparent-background-images :)

标签： css

【解决方案1】：

如果您使用图像标签来设置图像，则可以使用 CSS3 属性“不透明度”轻松更改。

是这样写的：

img {
    opacity: 0.4;
    filter: alpha(opacity = 40); /* For IE */
}

不透明度值必须介于 0 和 1 之间。0 表示不可见，1 表示不透明。

如果您使用 CSS“background-image”属性应用背景图像，那么您仍然可以使用不透明度来更改背景图像，但必须以不同的方式完成。

这是因为当您只想改变背景图像的不透明度时，不透明度值会改变整个元素的不透明度。

有一个简单的方法可以解决这个问题：只需将内容覆盖在图像上并将它们包装在一个公共父级中，并将不透明度更改仅应用于背景部分：

HTML

<div id="container">
    <div id="background" class="translucent"></div>
    <div id="content"></div>
</div>

CSS

.translucent {
    opacity: 0.4;
    filter: alpha(opacity = 40); /* For IE */
}
#container {
    position: relative;
    width: 200px;
    height: 200px;
}
#background, #content {
    position: absolute;
    top: 0;
    left: 0;
}
#background {
    background-image: url(http://www.thisisfake.com);
}

【讨论】：

与 opacity 不同，background-image 对 CSS3 来说并不陌生——它从一开始就存在。
CSS3 中没有 background-image-opacity 之类的东西，其实我有点震惊。
@Madmartigan 这不会有帮助吗？ =p
@WesleyMurch：考虑到在 HTML5 中仍然没有原生布局元素（不要与混淆），这并不令人震惊。

为什么要引入一个新的元素而不是修复/重构
？

【解决方案2】：

您还可以使用 css3 伪类和不透明度来完成透明背景图像。比如……

HTML：

<div class="transparent-background">
        ...content that should have 100% opacity...
</div>

CSS：

.transparent-background { ... }
.transparent-background:after {
    background: url("../images/yourimage.jpg") repeat scroll 0 0 transparent;
    opacity: 0.5;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
}

查看示例 - http://jsfiddle.net/sjLww/

【讨论】：

太棒了。这似乎工作得很好。浏览器支持是什么样的？
该死。刚刚意识到插入的内容超出了我的其余内容的顶部，阻止了我点击链接。 z-index 似乎无法解决，但如果我错了，请纠正我。

【解决方案3】：

将图像添加到HTML 标签并使用rgba(0,0,0,[your opacity]) 添加background-color

html {
    background:url('image.jpg') #303030; 
    background-size:cover;
}

body {
    background:rgba(0,0,0,0.7);
}

【讨论】：

很好的解决方案！

【解决方案4】：

您可以使用 Photoshop 中的不透明度保存该图像，或者使用纯色或渐变色作为具有 RGBA 颜色的背景：背景色：rgba(0,0,0,.4)

【讨论】：

【解决方案5】：

是的，IE9、Firefox、Chrome、Opera 和 Safari 使用属性 opacity 来实现透明度。 opacity 属性的取值范围为 0.0 - 1.0。较低的值使元素更透明。

IE8 及更早版本使用 filter:alpha(opacity=x)。 x 的取值范围为 0 - 100。较低的值使元素更透明。

img
{
    opacity: 0.5; /*(Range = 0.0 to 1.0)*/
    filter: alpha(opacity = 50); /* (Range = 0% to 100%) For IE8 & ealier */
}

我们还可以为任何<DIV> 标记提供OPACITY 并制作透明框。

这里是 *

完整示例

<html>
<head>
<style>
div.background
  {
  width:500px;
  height:250px;
  background:url(klematis4_small.jpg) repeat;
  border:2px solid black;
  }
div.transbox
  {
  width:400px;
  height:180px;
  margin:30px 50px;
  background-color:#ffffff;
  border:1px solid black;
  opacity:0.6;
  filter:alpha(opacity=60); /* For IE8 and earlier */
  }
div.transbox p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  }
</style>
</head>

<body>

<div class="background">
<div class="transbox">
<p>
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>

</body>
</html>

【讨论】：

【解决方案6】：

图像不透明度不是 CSS3 属性，它是 CSS2 属性。使用此属性没有跨浏览器兼容性问题。即使在旧版本的 IE 中也能正常工作。

以下是语法

img {
    opacity: 0.7;
    filter: alpha(opacity = 70); /* For IE */
}

不透明度值必须介于 0 和 1 之间。0 表示不可见，1 表示不透明。

对于 DOM 元素的透明度 background-color 属性 rgba 可以用作

div {
   background: rgba(200, 54, 54, 0.5); 
}

由于与旧版本的 IE 存在兼容性问题，因此建议使用回退。

div {
    background: rgb(200, 54, 54); /* The Fallback */
    background: rgba(200, 54, 54, 0.5); 
}

也可以使用 IE 条件表以获得更好的性能。

<!--[if IE]>
   <style type="text/css">
   .color-block { 
          background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000); 
   zoom: 1;
} 

</style>

【讨论】：

【解决方案7】：

背景图像透明度不是 CSS 规范的一部分（虽然它应该是，请有人把它放进去，但我认为 Chrome 可能实际上支持这一点）。

但是，使用背景图像模拟透明度的部分方法是在 CSS 中包含线性渐变。会放置在背景图片之上，如果使用body的背景色，可以创建图片淡入网页背景的效果，但是需要使用RGBA 颜色模式和从相同颜色过渡到具有不同 alpha 设置的相同颜色，如下所示：

background:linear-gradient(to right, rgba(0,0,255,0), rgba(0,0,255,1)), url(images/myImage.jpg) fixed no-repeat top center;

【讨论】：

【解决方案8】：

有一个完美的工具叫： Petteriny（透明像素制作者）它可以创建您需要的任何透明度模式。它还会生成您需要的 CSS。这是这个工具的一个例子。

.myDiv{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQIW2NUTmk3vjun8iwjAxCAOAA2KgVERG1HmQAAAABJRU5ErkJggg==
) repeat;}

你使用它，就像在你的 html 中这样

 <style> 
.transback {
   background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQIW2NUTmk3vjun8iwjAxCAOAA2KgVERG1HmQAAAABJRU5ErkJggg==
) repeat;}
  </style>
<div class="pure-u-1 transback">
 your text over image
</div>

在这个工具中也可以下载模式

【讨论】：