web-dev-qa-db-fra.com

Texte HTML/CSS fond transparent mais texte non

Donc j'ai un problème. J'ai regardé autour et regardé autour mais pas de chance. Je voudrais rendre le fond de mon corps transparent mais laisser le texte non transparent. En ce moment, je continue à faire 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 vous n'avez pas besoin "tccraft.net" dans votre URL pour accéder à une page facebook): http://tccraft.net/index.php Merci!

htmlcsstextopacity
61
tec4

N'utilisez pas opacity pour cela, définissez l'arrière-plan sur une valeur RGBA plutôt que de rendre l'arrière-plan semi-transparent. Dans votre cas, ce serait comme ça.

.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.

128
Karl-Johan Sjögren

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 arrière-plans en dégradé.

Pour obtenir la transparence sur un fond d'image, réduisez simplement l'opacité de l'image dans un éditeur d'image de votre choix.

11
James Coyle

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

2
FelipeAls

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 RVB.

Si vous ne vous en tenez pas aux solutions CSS uniquement, essayez CSS3PIE a try. Avec cette syntaxe, vous pouvez voir 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);
}
0
BL_