CSS: opacity only background, not the text inside
The easy way would be to move the text into a separate div, like so. Basically you apply the opacity to a separate div and position the text on top...
<div id="parent">
<div id="opacity"></div>
<div id="child">text</div>
</div>
div#parent { position:relative; width:200px; height:200px; }
div#child { position:absolute; width:200px; height:200px; z-index:2; }
div#opacity { position:absolute; width:200px; height:200px; z-index:1; }
The other route would be rgba. Don't forget there's a separate css property to feed IE since it doesn't support the rgba
property. You can also feed a transparent png.
#regForm {
background: rgb(200, 54, 54); /* fallback color */
background: rgba(200, 54, 54, 0.5);
}
And for IE...
<!--[if IE]>
<style type="text/css">
.color-block {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
zoom: 1;
}
</style>
<![endif]-->
Personally I'd go with the first option because it's less of a hassle.
Making text background transparent but not text itself
Don't use opacity
for this, set the background to an RGBA-value instead to only make the background semi-transparent. In your case it would be like this.
.content {
padding:20px;
width:710px;
position:relative;
background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
background: rgba(204, 204, 204, 0.5);
}
See http://css-tricks.com/rgba-browser-support/ for more info and samples of rgba-values in css.
Can I set an opacity only to the background image of a div?
Nope, this cannot be done since opacity
affects the whole element including its content and there's no way to alter this behavior. You can work around this with the two following methods.
Secondary div
Add another div
element to the container to hold the background. This is the most cross-browser friendly method and will work even on IE6.
HTML
<div class="myDiv">
<div class="bg"></div>
Hi there
</div>
CSS
.myDiv {
position: relative;
z-index: 1;
}
.myDiv .bg {
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(test.jpg) center center;
opacity: .4;
width: 100%;
height: 100%;
}
See test case on jsFiddle
:before and ::before pseudo-element
Another trick is to use the CSS 2.1 :before
or CSS 3 ::before
pseudo-elements. :before
pseudo-element is supported in IE from version 8, while the ::before
pseudo-element is not supported at all. This will hopefully be rectified in version 10.
HTML
<div class="myDiv">
Hi there
</div>
CSS
.myDiv {
position: relative;
z-index: 1;
}
.myDiv:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(test.jpg) center center;
opacity: .4;
}
Additional notes
Due to the behavior of z-index
you will have to set a z-index for the container as well as a negative z-index
for the background image.
Test cases
See test case on jsFiddle:
- Using CSS 2.1 :before
- Using CSS 3 ::before
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
background: rgba(51, 170, 51, .1) /* 10% opaque green */
background: rgba(51, 170, 51, .4) /* 40% opaque green */
background: rgba(51, 170, 51, .7) /* 70% opaque green */
background: 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.
Apply opacity to background image but not text
opacity
is not an inherit
property but affect the content so when you increase the opacity of .image
that also affects to .text
, you can use pseudo elements and background: rgba()
to achieve what you want like this:
Here a working JSFiddle to play with
.wrap { width: 100%;}.image { background-image: url("https://i.stack.imgur.com/gijdH.jpg?s=328&g=1"); position: relative; height: 100vh;}.image:before{ content: ''; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0,0,0,0.7);}.text { color: #FFF; position: relative;}
<div class="wrap"> <div class="image"> <div class="text"> <p>I LOVE YOU</p> </div> </div></div>
How to apply div opacity only on background image and not on text inside
A slightly different approach from Vitorino Fernandes' answer would be to 'nest' a pseudo element between the text and background:
div { position: relative; height: 300px; width: 300px; display: inline-block; color:white;}div:before,div:after { content: ""; position: absolute; height: 100%; width: 100%; top: 0; left: 0; transition:all 0.8s;}div:before { background: rgba(0, 0, 0, 0); /*this changes on hover - you might just want to change it here to get rid of the hover altogether*/ z-index: -1;}div:after { z-index: -2; background: url(http://placekitten.com/g/300/300);}div:hover:before{ background: rgba(0, 0, 0, 0.6); }
<div>Hover to see effect</div>
How to make opacity only for background?
Hi if your background does not has any Images.
Then easily you can apply opacity on it background.
Here is some example you can use ->
background-color: #00ff0055;
/*-- The value after six digit is your alpha color or opacity of background.--*/
background-color: #0f05; /*-- Same as previous one.--*/
background-color: rgba(0,255,0,.5); /*-- a extend for alpha color--*/
Hope this help you.
How to change text transparency in HTML/CSS?
opacity
applies to the whole element, so if you have a background, border or other effects on that element, those will also become transparent. If you only want the text to be transparent, use rgba
.
#foo {
color: #000; /* Fallback for older browsers */
color: rgba(0, 0, 0, 0.5);
font-size: 16pt;
font-family: Arial, sans-serif;
}
Also, steer far, far away from <font>
. We have CSS for that now.
Related Topics
Strange Border-Width Behavior in Chrome - Floating Point Border-Width
CSS Ul Li Image to Align with Text
How to Add Multiple Classes to Markdown Using Jekyll
CSS3 Background-Size - How to Guarantee Coverage
How to Resolve The CSS Warnings for Browser Specific Selectors in Bootstrap 3
How to Revert Webkit-Appearance for Input[Type="Search"] of Normalize.CSS
Add CSS to Head from Template File in Magento
Ie7 and "Inherit": Ignoring Entire Rule
CSS: Two Divs - One Fills Space, One Shrink-To-Fit
Mvc: I Have Deployed My Application, But CSS Only Works When I Log In
In CSS Use "Display:None" on The Element, But Keep Its ":After"
Absolutely Positioned Flexbox Doesn't Expand to Fit Contents
Word-Wrap Not Working in Internet Explorer
Setting The Scrollbar Color in Safari for Lion (Os X 10.7)
CSS: Link and: Visited Pseudo-Classes - Are Web Browsers Adhering to The Spec