[CSSチュートリアル】css3 背景画像 半透明 コンテンツ 不透明 方法例
2022-02-05 03:25:38
ランディングページを行うための最後のブログは、問題が発生することです、突然この背景画像透明を使用したいが、コンテンツが透明効果ではない、ここで私は私の2つのアイデアを言うだろうそれ。
その効果を示すのが
コンテンツの半透明化
コンテンツの不透明性
最も一般的な方法は、要素の不透明度を設定することで、コンテンツと背景が半透明になり、視覚効果に深刻な影響を与え、上記の効果を得ることができないことです
方法1. background-color:rgba()を設定し、背景色の透明度のみを設定します。
背景が画像の場合、上記の方法ではうまくいかないので、2つの方法を紹介します。
一つ目は、擬似要素::before を使って、擬似要素に背景を追加し、擬似要素の背景の透明度を
.login_box::before{
content:"";
background-image:url(images/one.jpg);
opacity:0.5;//transparency setting
z-index:-1;
background-size:500px 300px;
width:500px;
height:300px;
position:absolute;
// Be sure to set position:absolute, so that the z-index can be set and the background can be placed at the next level of the content
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;
}
擬似要素と同じように、動作しないdivを設定し、その中にコンテンツを配置し、親divに背景を設定し、透過性を持たせれば、おおよそ次のようなレイアウトになります。
<div class="bg">
<div class="content">
Content
</div>
</div>
これは同じ効果を得ることができます
背景画像半透明コンテンツ不透明メソッドの例を達成するためにCSS3に関するこの記事は、これに導入され、より関連するCSS3背景画像半透明コンテンツ不透明コンテンツは、スクリプトホーム以前の記事を検索するか、次の関連記事を閲覧し続け、私はあなたが将来的に多くのスクリプトホームをサポートすることを願っています!。
関連
-
[CSSチュートリアル】resizeで画像のプレビューを切り替える方法
-
[CSSチュートリアル】CSSで炎のエフェクトを記述する方法
-
[CSSチュートリアル]モバイルにおけるviewportの具体的な使い方
-
[CSSレイアウト例】等間隔の四角形で完璧なページレイアウトを実現する方法
-
[css3]CSS3:overflowプロパティ
-
[CSSチュートリアル】テーブルの最大幅と最小幅の相性問題と解決策を解説
-
[css3] css3の擬似クラスについて、共通使用前と共通使用後で説明する。
-
[css3]CSS3+HTML5+JSでブロックの縮小・拡大アニメーション効果を実装する。
-
[CSSチュートリアル】CSS clear float clear:both サンプルコード
-
[CSSレイアウト例】6種類の適応的な2カラムレイアウトを実現するCSS
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル]z-indexの違い。cssのz-index: 0とz-index: autoの違い。
-
[css3]css3は、背景画像の色を変更するためのさまざまな方法を実現するために
-
[CSSチュートリアル】子要素のmargin-topが親要素の移動を引き起こす問題解決
-
[CSSチュートリアル】擬似要素で実現する中空三角矢印とXアイコンの例
-
[CSSチュートリアル】background-positionプロパティのパーセンテージ値の使い方を探る
-
[CSSチュートリアル】CSSプリグラミング言語と詳細解説の違いについて
-
[css3]CSS3アニメーションによるグラフィックドロップ効果
-
[css3]css3 elastic box flexによる3カラムレイアウトの実装。
-
[CSSチュートリアル]CSS線形グラデーションの凹型矩形遷移の動的効果
-
[CSSチュートリアル】Chromeのフォント最小12px制限の最終解決策