CSS3 で半透明の背景画像と不透明なコンテンツを実現する方法の例

以前のブログのログインページを作成していたときに、この問題に遭遇しました。突然、透明な背景画像と不透明なコンテンツの効果を使用したくなりました。ここでは、私の 2 つのアイデアについて説明します。

エフェクト表示:

コンテンツは半透明です

ここに画像の説明を挿入

不透明なコンテンツ

ここに画像の説明を挿入

最も一般的なアプローチは、要素の不透明度を設定することです。この設定では、コンテンツと背景の両方が半透明になり、視覚効果に重大な影響を与え、上記の効果は実現されません。

方法 1: background-color:rgba() を設定します。この方法では、背景色の透明度のみを設定できます。

背景が画像の場合、上記の方法は適用されません。次の 2 つの方法があります。

1 つ目は、疑似要素 :: before を使用することです。これは、疑似要素に背景を追加し、疑似要素の背景の透明度を設定することで行います。

.ログインボックス::前{
            コンテンツ："";
           
            背景画像:url(images/one.jpg);
            opacity:0.5; //透明度設定 z-index:-1;
            背景サイズ:500px 300px;
            幅:500ピクセル; 
            高さ:300px;
            位置:絶対;
            // 背景がコンテンツの次のレイヤーになるように z-index を設定できるように、必ず position:absolute を設定してください。top:0px;
            左:0px;
            境界線の半径:40px;
        }
         .ログインボックス{
            位置:固定;
            残り:50%;
            上:200px;
            幅:500ピクセル;
            高さ:300px;
            左マージン:-250px;
            境界線の半径:40px;
            ボックスの影: 10px 10px 5px #888;
            境界線:1px 実線 #666;
 
            テキスト配置:中央;
        }

この方法は疑似要素に似ています。異なる div を設定し、その中の div にコンテンツを配置し、親 div の背景を設定し、透明度を設定できます。レイアウトは次のようになります。

<div class="bg">
    <div class="content">
    コンテンツ
</div>

これも同様の効果が得られる

CSS3 で半透明の背景画像と不透明コンテンツを実現する例についての記事はこれで終わりです。CSS3 で半透明の背景画像と不透明コンテンツを実現する例については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: uni-app WeChatアプレット認証ログイン実装手順

>>: Element UI で自動サイズ調整テキストエリアの高さを設定する方法