Rendre le fond du texte transparent mais pas le texte lui-même

Question

J'ai donc un problème. J'ai cherché partout, mais sans succès. Je voudrais rendre l'arrière-plan de mon corps transparent mais laisser le texte non transparent. En l'état actuel des choses, les deux ont la même opacité. Voici mon 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;
}

Voici mon site web (cliquez sur le lien dont tapez "tccraft.net" dans votre url cela vous amènera à une page facebook) : http://tccraft.net/index.php Merci !

Answer 1

N'utilisez pas opacity pour cela, définissez l'arrière-plan à une valeur RGBA à la place pour rendre l'arrière-plan seulement semi-transparent. Dans votre cas, ce serait comme ceci.

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

Voir http://css-tricks.com/rgba-browser-support/ pour plus d'informations et des exemples de valeurs rgba en css.

Answer 2

Pour un arrière-plan totalement transparent, utilisez :

background: transparent;

Sinon, pour un remplissage de couleur semi-transparent, utilisez :

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

où les valeurs sont :

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

Vous pouvez également utiliser les valeurs rgba pour les fonds en dégradé.

Pour obtenir la transparence sur un fond d'image, il suffit de réduire au préalable l'opacité de l'image dans un éditeur d'images de votre choix.

Answer 3

opacity rendra le texte et l'arrière-plan transparents. Utilisez plutôt une couleur d'arrière-plan semi-transparente, en utilisant l'attribut rgba() par exemple. Fonctionne avec IE8+.

Answer 4

Si vous utilisez RGBA pour les navigateurs modernes, vous n'avez pas besoin de laisser les anciens IE utiliser uniquement la version non transparente de la couleur donnée avec RGB.

Si vous ne vous en tenez pas à des solutions uniquement CSS, donnez à CSS3PIE un essai. Avec cette syntaxe, vous pouvez obtenir exactement le même résultat dans les anciens IE que dans les navigateurs modernes :

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

Answer 5

Pour rendre l'arrière-plan de votre corps transparent, essayez ce style, il a fonctionné pour moi, ajoutez "ad" à la fin de votre code couleur désiré.

background-color: #42413Cad !important;