Making text background transparent but not text itself
HtmlCssTextOpacityHtml Problem Overview
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!
Html Solutions
Solution 1 - Html
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 - Html
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 - Html
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+
Solution 4 - Html
If you use RGBA for modern browsers you don't need let older IEs use only the non-transparent version of the given color with RGB.
If you don't stick to CSS-only solutions, give CSS3PIE a try. With this syntax you can see exactly the same result in older IEs that you see in modern browsers:
div {
-pie-background: rgba(223,231,233,0.8);
behavior: url(../PIE.htc);
}
Solution 5 - Html
To make the background of your body transparent please try this style, it worked for me, add "ad" at the end of your desired color code
background-color: #42413Cad !important;
Solution 6 - Html
I would add Hex color code for transparency
background-color: #42413C+hexcode
https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 It would be somethin like this:
background-color: #42413C2E
It is equal to that color + 18% alpha
Solution 7 - Html
I found a way with z-index.
The watermark class (you can use an example from #19531361) does the job. All input tags are non transparent, but they sit "behind" the watermark. To make them active, use following css modifications (inputs are then "on top").
input {
position:relative;
z-index:10;
}
.watermark {
position: absolute;
opacity: 25%;
z-index:0;
}
Solution 8 - Html
box-shadow: inset 1px 2000px rgba(208, 208, 208, 0.54);