This question already has an answer here:
Can I assign the opacity property to the background property of a div only and not to the text on it?
I've tried:
background: #CCC;
opacity: 0.6;
but this doesn't change the opacity.
</div>
转载于:https://stackoverflow.com/questions/5135019/css-opacity-only-to-background-color-not-the-text-on-it
It sounds like you want to use a transparent background, in which case you could try using the rgba() function:
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 */
A small example showing how rgba can be used.
As of 2018, practically every browser supports the rgba syntax.
You can't. You have to have a separate div that is just that background, so that you can only apply the opacity to that.
I tried doing this recently, and since I was already using jQuery, I found the following to be the least hassle:
text div a solid background color, because that will be the JS-less default.text div's height, and apply it to the background div.I'm sure there's some kind of CSS ninja way to do all this with only floats or something, but I didn't have the patience to figure it out.
The easiest way to do this is with 2 divs, 1 with the background and 1 with the text:
#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></div>
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 it's children, check this workaround. You must have an absolutely positioned child with a relatively positioned parent to achieve this. http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/
Check working demo at http://www.impressivewebs.com/demo-files/css-opacity/css-opacity-demo.html
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.
My trick is to create a transparent .png with the color and use background:url().
I had the same problem. I want 100% Transparent background color, Just use this code, its worked great for me:
rgba(54, 25, 25, .00004);
You can see examples on the left side on this web page (the contact form area)
For anyone coming across this thread, here's a script called thatsNotYoChild.js that I just wrote that solves this problem automatically:
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.
use
background:url("location of image");//use an image with opacity
This method will work in all browsers
A great way to do this would be to use css3 indeed.
Create a div width a class - e.g. supersizer on top of your page:
then set following css-properties:
.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></div>
For LESS users only:
If you don't like to set your colors using RGBA, but rather using HEX, there are solutions.
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 function also provide:
.myClass {
background-color: fade(#FFFFFF, 50%);
}