CSS 使用 CSS3 的背景图像透明度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8691986/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Background image transparency with CSS3?
提问by Alice
Is there a way to add transparency to a background-image using CSS3?
有没有办法使用 CSS3 为背景图像添加透明度？
采纳答案by Mark Kramer
If you are using an image tag to set the image, it can be easily changed using the CSS3 property "opacity".
如果您使用图像标签来设置图像，则可以使用 CSS3 属性“opacity”轻松更改。
It is written like this:
它是这样写的：
img {
opacity: 0.4;
filter: alpha(opacity = 40); /* For IE */
}
the value for opacity must be between 0 and 1. 0 being invisible and 1 being opaque.
opacity 的值必须介于 0 和 1 之间。0 表示不可见，1 表示不透明。
If you are applying the background image by using the CSS "background-image" property then you can still use the opacity to change the background image but it must be done in a different way.
如果您使用 CSS “background-image” 属性应用背景图像，那么您仍然可以使用不透明度来更改背景图像，但必须以不同的方式完成。
This is because the opacity value changes the opacity on the entire element when you only want the opacity changed on the background image.
这是因为当您只想更改背景图像的不透明度时，不透明度值会更改整个元素的不透明度。
There is an easy way to work around this: just overlay the content over the image and wrap them in a common parent and apply the opacity change to only the background part:
有一个简单的方法可以解决这个问题：只需将内容覆盖在图像上并将它们包装在一个公共父级中，然后仅将不透明度更改应用于背景部分：
HTML
HTML
<div id="container">
<div id="background" class="translucent"></div>
<div id="content"></div>
</div>
CSS
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);
}
回答by corradomatt
You can also accomplish a transarent background image using the css3 pseudo classes and opacity. For example....
您还可以使用 css3 伪类和不透明度来完成透明背景图像。例如....
HTML:
HTML：
<div class="transparent-background">
...content that should have 100% opacity...
</div>
CSS:
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;
}
See the sample - http://jsfiddle.net/sjLww/
查看示例 - http://jsfiddle.net/sjLww/
回答by Michael Fitchett
Add the image to the HTMLtag and add a background-colorusing rgba(0,0,0,[your opacity])
将图像添加到HTML标签并添加一个background-colorusingrgba(0,0,0,[your opacity])
html {
background:url('image.jpg') #303030;
background-size:cover;
}
body {
background:rgba(0,0,0,0.7);
}
回答by Mircea
You can save that image with opacity from Photoshop or use a solid or gradient color as background with an RGBA color: background-color: rgba(0,0,0, .4)
您可以使用 Photoshop 中的不透明度保存该图像，或者使用纯色或渐变色作为具有 RGBA 颜色的背景：background-color: rgba(0,0,0, .4)
回答by Sandy
yes, IE9, Firefox, Chrome, Opera, and Safari use the property opacityfor transparency. The opacity property can take a value from 0.0 - 1.0. A lower value makes the element more transparent.
是的，IE9、Firefox、Chrome、Opera 和 Safari 使用属性opacity来实现透明度。opacity 属性的值可以是0.0 - 1.0。较低的值使元素更透明。
IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 - 100. A lower value makes the element more transparent.
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 */
}
Also we can give OPACITY to any <DIV>tag and make transparent boxes.
我们还可以为任何<DIV>标签赋予OPACITY并制作透明盒子。
Here is the *
这是*
FULL EXAMPLE
完整示例
<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>
回答by Chandan Gorapalli
image opacity is not a CSS3 property it is a CSS2 property.There are no cross-browser compatibility issues using this property.It works fine even in older versions of IE.
图像不透明度不是 CSS3 属性，而是 CSS2 属性。使用此属性没有跨浏览器兼容性问题。即使在旧版本的 IE 中也能正常工作。
The following is the syntax
以下是语法
img {
opacity: 0.7;
filter: alpha(opacity = 70); /* For IE */
}
the value for opacity must be between 0 and 1. 0 being invisible and 1 being opaque.
opacity 的值必须介于 0 和 1 之间。0 表示不可见，1 表示不透明。
for transparency to DOM elements background-color property rgba can be used as
对于 DOM 元素的透明度，背景颜色属性 rgba 可以用作
div {
background: rgba(200, 54, 54, 0.5);
}
as there are compatibility issues with older versions of IE a fallback is advised.
由于旧版本的 IE 存在兼容性问题，因此建议回退。
div {
background: rgb(200, 54, 54); /* The Fallback */
background: rgba(200, 54, 54, 0.5);
}
IE conditional sheets can be used as well for better performance.
也可以使用 IE 条件表以获得更好的性能。
<!--[if IE]>
<style type="text/css">
.color-block {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000);
zoom: 1;
}
</style>
回答by F J
Background Image Transparencyis not part of the CSS Specification (though it should be, please someone put it in, I think Chrome may actually support this though).
背景图像透明度不是 CSS 规范的一部分（虽然它应该是，请有人把它放进去，我认为 Chrome 可能实际上支持这一点）。
However a partial way to mimic transparency, with a background image, is to include a linear-gradient in the CSS. It will be placed on top of the background image and if you use the background color of the body, you can create the effect of the image fading into the background of the webpage, But you need to use the RGBAcolor mode and transition from the same color to the same color with different alpha settings like so:
然而，使用背景图像模拟透明度的一种部分方法是在 CSS 中包含线性渐变。它将被放置在背景图像的顶部，如果您使用主体的背景颜色，您可以创建图像淡入网页背景的效果，但您需要使用 RGB A颜色模式并从具有不同 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;
回答by Richard de Ree
There is a perfect tool named: Petteriny(transparent pixel maker) which create any transparency pattern you need . It also generate the CSS you need. here is an example what this tool makes.
有一个完美的工具，名为： Petteriny（透明像素制作器），它可以创建您需要的任何透明图案。它还生成您需要的 CSS。这是此工具制作的示例。
.myDiv{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQIW2NUTmk3vjun8iwjAxCAOAA2KgVERG1HmQAAAABJRU5ErkJggg==
) repeat;}
You use it, this like this in your html
你在你的html中使用它，就像这样
<style>
.transback {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQIW2NUTmk3vjun8iwjAxCAOAA2KgVERG1HmQAAAABJRU5ErkJggg==
) repeat;}
</style>
<div class="pure-u-1 transback">
your text over image
</div>
In this tool it's also possible to download the pattern
在这个工具中，也可以下载模式
