この記事では、純粋な CSS を使用して背景画像を半透明および不透明にする方法を主に紹介します。参考になれば幸いです。
最近ログインインターフェイスを作成したのですが、背景画像が透明でコンテンツが不透明であるこのエフェクトを突然使いたいと思いました。ここで私の 2 つのアイデアについて話します。
効果の表示
半透明
不透明
よくある失敗例
この設定の効果は、要素の不透明度を設定することです。背景は半透明であり、視覚効果に重大な影響を与えます。
もう 1 つのオプションは、background-color:rgba() を設定することです。このメソッドは背景色の透明度のみを設定します。
正しい姿勢
私は 2 つの方法を考えました。1 つ目は、擬似要素に背景を追加し、擬似要素の背景の透明度を設定することです。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登陆</title> <style type="text/css"> body{ background-image:url(images/bird.jpg); background-repeat: no-repeat; background-size:100%; } .login_box::before{ content:""; /*-webkit-filter: opacity(50%); filter: opacity(50%); */ background-image:url(images/love.jpg); opacity:0.5;//透明度设置 z-index:-1; background-size:500px 300px; width:500px; height:300px; position:absolute; //一定要设置position:absolute,这样才能设置z-index,让背景处于内容的下一层 top:0px; left:0px; border-radius:40px; } .login_box{ position:fixed; left:50%; top:200px; width:500px; height:300px; margin-left:-250px; border-radius:40px; box-shadow: 10px 10px 5px #888; border:1px solid #666; text-align:center; } form{ display:inline-block; margin-top:100px; } input{ display:block; width:250px; height:30px; background-color: #888; border:1px solid #fee; outline:none; border-radius:10px; } input[type="submit"]{ width:100px; height:30x; margin-left: 70px; background-color: #ccc; } span{ color:red; font-size:15px; } </style> </head> <body> <p class="login_box"> <form action=<?php echo $_SERVER['PHP_SELF'] ?> method="post"> <input type="text" name="nickname"> <span><?php echo $nameERR; ?></span> <br> <input type="password" name="password"> <span><?php echo $passwordERR; ?></span> <br> <input type="submit" value="登陆"> </form> </p> </body> </html>
<p class="bg"> <p class="content"> 一些内容 </p> </p>
Js または CSS フィルターを使用して、IE6 IE6PNG で PNG 画像の半透明効果を実現する IE6PNG proper_html/css_WEB-ITnose
js メソッドを使用して、9 正方形グリッドの半透明グラデーション効果を実現する image_javascript スキル
CSS不透明度 - 画像の半透明効果を実現するコード_体験交換
以上がCSSコード共有による半透明の背景画像と不透明なコンテンツを実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。