CSS での背景 (プロパティ、色、画像) 設定の概要と共有

この記事は CSS 背景に関する常識についての記事で、CSS 背景プロパティ、CSS 背景色、CSS 背景画像について詳しく紹介します。必要な友達は、

1. CSS 背景属性

1 を参照してください。 CSS 背景属性と CSS3 背景画像設定の概要の共有

CSS には、次のようないくつかの背景属性があります。

background    在一个声明中设置所有的背景属性。
background-attachment    设置背景图像是否固定或者随着页面的其余部分滚动。    
background-color    设置元素的背景颜色。 
background-image    设置元素的背景图像。
background-position    设置背景图像的开始位置。
background-repeat    设置是否及如何重复背景图像。   
background-clip    规定背景的绘制区域。
background-origin    规定背景图片的定位区域。
background-size    规定背景图片的尺寸。

2. CSS の知識-background プロパティをマスターする必要があります

注:background-color は継承できず、デフォルト値は透明です。トランスペアレントとは「透明な」という意味です。つまり、要素で背景色が指定されていない場合、背景は透明になり、その祖先要素の背景が表示されます。

3. CSS背景固定スタイルのbackground-attachment属性の基本入門

background-attachment属性には2つの属性値しかありません。スクロールは、オブジェクトのスクロールに合わせて背景画像もスクロールすることを意味し、これはデフォルトのオプションです。固定は、背景画像がページ上に固定され、他のコンテンツのみがスクロール バーとともにスクロールすることを意味します。

2. CSSの背景色

1. CSSを使って背景色のグラデーションアニメーションの例を上手に作成します

ここから本文です。場合によっては、特定の状況では、次のアニメーション効果、グラデーション + アニメーションが必要になる場合があります:

2. CSS3 を使用して背景のグラデーションメソッドを実装します

なしで実行することもできます。 cssの背景グラデーションを知る 以前はPSを使って、自分で作ったWebページに背景のグラデーション画像を適用していました。しかし、少し前に、CSS3 でも背景のグラデーションを実行できることを知り、背景のグラデーション効果を実現するのがはるかに簡単になりました。CSS3 で背景のグラデーションを実行する方法をいくつか紹介します

3 CSS3 で透明度を調整するには RGBa を使用します。

の例 CSS3 では、開発者が要素の透明度を設定できるように不透明度属性が追加されました。現在、不透明度は主流の最新ブラウザでサポートされていますが、不透明度は要素とそのサブ要素を同じに設定します。同じ透明性でも、このような透明性ルールは非常に柔軟性が低く、実際の開発では多くの問題に遭遇することがよくあります。実際、CSS3 には別の色透明ソリューション (RGBa) があります。不透明度と比較すると、RGBa はそのサブ要素に影響を与えることなく単一要素の透明度を設定できますが、RGBa のブラウザサポートは不透明度ほど広範囲ではないため、開発者からはあまり注目されていません。

3. CSS 背景画像

1. CSS はレスポンシブな全画面背景画像を実装します

現在、この記事では最も単純な全画面の大きな画像を使用します。この効果を達成する方法。 CSS プロパティの背景サイズが使用され、JavaScript は必要ありません。

2. CSS3 の複数の背景と背景画像のトリミング、配置、サイズについての詳細な説明

CSS3 より前は、1 つの要素に複数の画像を追加できました。背景の場合は、カンマで区切って背景属性に複数の画像リソースを追加できます

次に、background-position を使用して、それらを希望の場所に配置します

3. CSS フルスクリーン背景画像設定 Django の画像パスの詳細な読み込み手順

この記事では、CSSのフルスクリーン背景画像の設定とdjangoの画像パスの読み込みについて詳しく紹介しており、編集者も非常に優れていると思いますので、皆さんの参考にもなります。

4. CSS を使用して透明な背景画像と不透明なテキストを実現する 2 つの特殊効果コードを紹介します

方法 1 (すりガラス効果): 背景画像 + 疑似クラス + flite:blur(3px)

方法 2 (セミ) -透明効果) ): 背景画像 + 配置 + 背景:rgba(255,255,255,0.3)

CSS を使用して透明な背景画像と不透明なテキスト効果を実現する 2 つの方法

プロジェクトでは、背景画像にテキストの導入を配置するためによく使用されます。透明な背景画像と不透明なテキストの効果を実現する 2 つのテクニックを次に示します。将来の学習のために記録します。

CSSの背景属性に関する質問と回答

1. CSS3 - CSSの背景色で境界線が塗りつぶされない、CSSの書き方は？

2. css3 - CSS 背景画像の高さを 100% にし、幅の比率を維持するにはどうすればよいですか?

3

2. php.cn Dugu Jiijian (2) - CSS ビデオ チュートリアル

3. CSS ビデオ チュートリアル CSS 背景をすぐに学べます

以上がCSS での背景 (プロパティ、色、画像) 設定の概要と共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。