html - poner - texto opaco sobre fondo semitransparente con css

Fondo de texto HTML/CSS transparente pero no texto

Question

Entonces estoy teniendo un problema Miré alrededor y miré alrededor, pero no tuve suerte. Me gustaría hacer que el fondo de mi cuerpo sea transparente, pero no dejar el texto no transparente. Como es ahora, sigo haciendo que ambos tengan la misma opacidad. Aquí está mi código:

@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;
}

Aquí está mi sitio web (haga clic en el enlace No escriba "tccraft.net" en su url que lo llevará a una página de Facebook): http://tccraft.net/index.php Gracias!

Answer 1

No use opacity para esto, establezca el fondo en un valor RGBA para que el fondo se vuelva semitransparente. En tu caso sería así.

.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);
}

Consulte http://css-tricks.com/rgba-browser-support/ para obtener más información y ejemplos de valores rgba en css.

Answer 2

Para un uso de fondo completamente transparente:

background: transparent;

De lo contrario, para un uso de relleno de color semitransparente:

background: rgba(255,255,255,0.5); // or hsla(0, 0%, 100%, 0.5)

donde los valores son:

background: rgba(red,green,blue,opacity); // or hsla(hue, saturation, lightness, opacity)

También puede usar valores de rgba para fondos degradados.

Para obtener transparencia en un fondo de imagen simplemente reduzca la opacidad de la imagen en un editor de imágenes de su elección de antemano.

Answer 3

Si usa RGBA para navegadores modernos, no necesita dejar que los IEs más antiguos usen solo la versión no transparente del color dado con RGB.

Si no se atiene a las soluciones exclusivas de CSS, CSS3PIE . Con esta sintaxis puede ver exactamente el mismo resultado en IE más antiguos que ve en los navegadores modernos:

div {
    -pie-background: rgba(223,231,233,0.8);
    behavior: url(../PIE.htc);
}

Answer 4

opacity hará que tanto el texto como el fondo sean transparentes. Utilice un color de fondo semitransparente en su lugar, utilizando un valor rgba() , por ejemplo. Funciona en IE8 +