Transparence du texte de l'image CSS
Nous montrons d'abord un exemple où l'arrière-plan est semi-transparent et le contenu est opaque :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> <style type="text/css"> body{ background: #40ed90; } #container { color: #154BA0; background: #ff0000; filter: Alpha(Opacity=10, Style=0); opacity: 0.10; position: absolute; height: 200px; width:500px; z-index:20; } #text { position: absolute; height: 200px; width:500px; text-align:center; z-index:30; } </style> </head> <body> <div id="container"></div> <div id="text">背景半透明但文字不透明</div> </body> </html>
Commentaire : Utilisez DIV ci-dessus + CSS implémenté
Ci-dessous, nous montrons un exemple où l'arrière-plan est transparent et le contenu est également transparent :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> <style type="text/css"> *{ padding: 0; margin: 0; } body{ padding: 50px; } .demo{ padding: 25px; background-color:#000000; opacity: 0.2; } .demo p{ color: #FFFFFF; } </style> </head> <body> <div class="demo"> <p>背景透明,文字也透明</p> </div> </body> </html>