Making text background transparent but not text itself
Solution 1
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.
Solution 2
For a fully transparent background use:
background: transparent;
Otherwise for a semi-transparent color fill use:
background: rgba(255,255,255,0.5); // or hsla(0, 0%, 100%, 0.5)
where the values are:
background: rgba(red,green,blue,opacity); // or hsla(hue, saturation, lightness, opacity)
You can also use rgba values for gradient backgrounds.
To get transparency on an image background simply reduce the opacity of the image in an image editor of you choice beforehand.
Solution 3
opacity
will make both text and background transparent. Use a semi-transparent background-color instead, by using a rgba()
value for example. Works on IE8+
Comments
-
tec4 almost 2 years
So I am having a problem. I have looked around and looked around but no luck. I would like to make the background of my body transparent but leave the text non transparent. As it is right now I keep making both the same opacity. Here is my code:
@charset "utf-8"; body { font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; background-color: #42413C; margin: 0; padding: 0; color: #000; } /* ~~ Element/tag selectors ~~ */ ul, ol, dl { padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, p { margin-top: 0; padding-right: 15px; padding-left: 15px; opacity:1; } a img { border: none; } a:link { color: #42413C; text-decoration: underline; } a:visited { color: #6E6C64; text-decoration: underline; } a:hover, a:active, a:focus { text-decoration: none; } .container { width: 750px; margin: 0 auto; } .content { padding:20px; width:710px; position:relative; background:#CCC; opacity: 0.5; } .fltrt { float: right; margin-left: 8px; } .fltlft { float: left; margin-right: 8px; } .clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px; } .header { top:0%; width: 750px; height: 200px; background-image: url(images/header.png); background-repeat:no-repeat; background-position:center; } .navbar { height: 50px; width: 750px; position: relative; z-index: 2; } #bg { position: fixed; top: 25%; left: 15%; z-index: -1; } div { display: block; }
Here is my website (click the link dont type "tccraft.net" in your url it will take you to a facebook page): http://tccraft.net/index.php Thank you!
-
Jujucat about 4 yearsAny idea how to achieve this with a background image?
-
Karl-Johan Sjögren about 4 yearsFor background images, just use a PNG or WEBP with an alpha channel as your image.
-
Mote Zart over 3 yearsIs there a link to more info about
background: transparent;
? I can't get it to work or find the docs for it.