CSS opacity 只给背景色，而不是文字就可以了？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5135019/
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
CSS opacity only to background color, not the text on it?
提问by Jay
Can I assign the opacityproperty to the backgroundproperty of a divonly and not to the text on it?
我可以将该opacity属性分配给backgrounda divonly的属性而不是其上的文本吗？
I've tried:
我试过了：
background: #CCC;
opacity: 0.6;
but this doesn't change the opacity.
但这不会改变不透明度。
回答by Tim Cooper
It sounds like you want to use a transparent background, in which case you could try using the rgba()function:
听起来您想使用透明背景，在这种情况下，您可以尝试使用该rgba()功能：
rgba(R, G, B, A)R (red), G (green), and B (blue) can be either
<integer>s or<percentage>s, where the number 255 corresponds to 100%. A (alpha) can be a<number>between 0 and 1, or a<percentage>, where the number 1 corresponds to 100% (full opacity).RGBa example
rgba(51, 170, 51, .1) /* 10% opaque green */ rgba(51, 170, 51, .4) /* 40% opaque green */ rgba(51, 170, 51, .7) /* 70% opaque green */ rgba(51, 170, 51, 1) /* full opaque green */
rgba(R, G, B, A)R（红色）、G（绿色）和 B（蓝色）可以是
<integer>s 或<percentage>s，其中数字 255 对应于 100%。A (alpha) 可以是<number>介于 0 和 1 之间的a或 a<percentage>，其中数字 1 对应于 100%（完全不透明度）。RGBa 示例
rgba(51, 170, 51, .1) /* 10% opaque green */ rgba(51, 170, 51, .4) /* 40% opaque green */ rgba(51, 170, 51, .7) /* 70% opaque green */ rgba(51, 170, 51, 1) /* full opaque green */
A small exampleshowing how rgbacan be used.
一个展示如何使用的小例子rgba。
As of 2018, practically every browser supports the rgbasyntax.
截至 2018 年，几乎每个浏览器都支持rgba语法.
回答by Kostas
The easiest way to do this is with 2 divs, 1 with the background and 1 with the text:
最简单的方法是使用 2 个 div，1 个用于背景，1 个用于文本：
#container {
position: relative;
width: 300px;
height: 200px;
}
#block {
background: #CCC;
filter: alpha(opacity=60);
/* IE */
-moz-opacity: 0.6;
/* Mozilla */
opacity: 0.6;
/* CSS3 */
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}<div id="container">
<div id="block"></div>
<div id="text">Test</div>
</div>回答by Sebastien Lorber
For Lessusers only:
仅适用于较少用户：
If you don't like to set your colors using RGBA, but rather using HEX, there are solutions.
如果您不喜欢使用 RGBA 设置颜色，而是使用 HEX，有一些解决方案。
You could use a mixin like:
你可以使用像这样的混合：
.transparentBackgroundColorMixin(@alpha,@color) {
background-color: rgba(red(@color), green(@color), blue(@color), @alpha);
}
And use it like:
并像这样使用它：
.myClass {
.transparentBackgroundColorMixin(0.6,#FFFFFF);
}
Actually this is what a built-in Less functionalso provide:
实际上，这是一个内置的 Less 函数也提供的：
.myClass {
background-color: fade(#FFFFFF, 50%);
}
See How do I convert a hexadecimal color to rgba with the Less compiler?
回答by Hussein
This will work with every browser
这适用于所有浏览器
div {
-khtml-opacity: .50;
-moz-opacity: .50;
-ms-filter: ”alpha(opacity=50)”;
filter: alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
opacity: .50;
}
If you don't want transparency to affect the entire container and its children, check this workaround. You must have an absolutely positioned child with a relatively positioned parent to achieve this. CSS Opacity That Doesn't Affect Child Elements
如果您不希望透明度影响整个容器及其子项，请查看此解决方法。你必须有一个绝对定位的孩子和一个相对定位的父母来实现这一点。不影响子元素的 CSS 不透明度
Check a working demo at CSS Opacity That Doesn't Affect "Children"
检查不影响“儿童”的 CSS Opacity 上的工作演示
回答by user1542894
My trick is to create a transparent .png with the color and use background:url().
我的诀窍是用颜色创建一个透明的 .png 并使用background:url().
回答by user2178930
I had the same problem. I want a 100% transparent background color. Just use this code; it's worked great for me:
我有同样的问题。我想要一个 100% 透明的背景颜色。只需使用此代码；它对我很有用：
rgba(54, 25, 25, .00004);
You can see examples on the left side on this web page(the contact form area).
回答by Wolfgang Zotter
A great way to do this would be to use CSS 3 indeed.
做到这一点的一个好方法是确实使用 CSS 3。
Create a div width a class - e.g. supersizer on top of your page:
创建一个 div 宽度类 - 例如在页面顶部的 supersizer：
Then set following CSS properties:
然后设置以下 CSS 属性：
.supersizer {
background: url("http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png") no-repeat center center fixed;
width: 100%;
height: 100%;
position: fixed;
z-index: -1;
opacity: 0.5;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
top: 0;
}<div class="supersizer"></div>回答by Louis L.
For anyone coming across this thread, here's a script called thatsNotYoChild.js that I just wrote that solves this problem automatically:
对于遇到此线程的任何人，这是我刚刚编写的一个名为 thatsNotYoChild.js 的脚本，它可以自动解决此问题：
http://www.impressivewebs.com/fixing-parent-child-opacity/
http://www.impressivewebs.com/fixing-parent-child-opacity/
Basically, it separates children from the parent element, but keeps the element in the same physical location on the page.
基本上，它将子元素与父元素分开，但将元素保持在页面上的相同物理位置。
回答by Balsa
The easiest solution is to create 3 divs. One that will contain the other 2, the one with transparent background and the one with content. Make the first div's position relative and set the one with transparent background to negative z-index, then adjust the position of the content to fit over the transparent background. This way you won't have issues with absolute positioning.
最简单的解决方案是创建 3 divs。一个将包含另外两个，一个具有透明背景，另一个包含内容。使第一个 div 的位置相对并将具有透明背景的那个设置为负z-index，然后调整内容的位置以适应透明背景。这样您就不会遇到绝对定位问题。
回答by Neeraj
Use:
用：
background:url("location of image"); // Use an image with opacity
This method will work in all browsers.
此方法适用于所有浏览器。
