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

J'ajouterais le code couleur Hex pour la transparence

couleur de fond : #42413C+hexcode

https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 Ce serait quelque chose comme ça :

background-color: #42413C2E

Elle est égale à cette couleur + 18% alpha

Answer 2

J'ai trouvé un moyen avec z-index.

La classe filigrane (vous pouvez utiliser un exemple à partir de #19531361 ) fait l'affaire. Toutes les balises d'entrée sont non transparentes, mais elles se trouvent "derrière" le filigrane. Pour les rendre actives, utilisez les modifications css suivantes (les entrées sont alors "au dessus").

input {
    position:relative;
    z-index:10;
}

.watermark {
    position: absolute;
    opacity: 25%;
    z-index:0;
}

Answer 3

Utilisez la valeur alpha au lieu d'utiliser l'opacité. Voir le code ci-dessous :

background: rgba(255,255,255,0.2);

Answer 4

box-shadow: inset 1px 2000px rgba(208, 208, 208, 0.54);