CSSで背景プロパティを設定する方法（詳しく解説）

この記事ではCSSでbackground属性を設定する方法を詳しく説明します。必要な方は参考にしていただければ幸いです。

背景関連の属性には主に次のものが含まれます:

• #background-color 背景色

##background-image 背景画像
background-repeat タイルリピートするかどうか (デフォルトタイル) |repeat-y (垂直タイル) |
background-position 背景位置の長さ (パーセンテージ) | 位置 (上部中央ボタンの左 右) 通常、一方の方向が指定され、もう一方の方向がデフォルトで中央に設定されている場合、2 つの方法を組み合わせて使用​​することもできます。と一致しました。位置名詞には順序の区別はありませんが、パーセンテージを使用する場合には、最初に水平方向、次に垂直方向に常に順序があります。
background-attachment 背景は固定ですか、それともスクロールしますか?
background: 背景色、背景画像、背景をタイル表示するか、背景を固定するかスクロールするか、背景の位置

•   #p1 {
              width: 300px;
              height: 300px;
              background-color: blue;            /*默认是transparent透明的*/
              /* background-color: transparent; */
              background-image: url(Images/2.jpg);
              background-repeat: no-repeat;            /*不平铺，默认是水平垂直平铺*/
              /* background-repeat: repeat-y; */
              /* background-repeat:  repeat-x; */
              /* background-position: right bottom; */
              background-position: 10% center;
              background-attachment: fixed;
          }

背景を半透明にしたい場合は、透明度を指定する場合は、rgba(r, g b,a) を使用します。 透明度を指定する手段です。

p {
            width: 100%;
            height: 300px;
            background-color: rgba(0, 0, 0, 0.6);
        }

複数の背景画像を使用する場合は、background を使用して複数の URL を指定します。画像が重なっている場合は、前の画像が上書きされますが、全体の背景色は最後の URL の後に指定する必要があります。

p {
            width: 100%;
            height: 300px;
            background: url(Images/2.jpg) no-repeat left top, url(Images/3.jpg) no-repeat right bottom blue;
        }

要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。関連チュートリアルの詳細については、 CSS 基本ビデオ チュートリアル

、 CSS3 ビデオ チュートリアル をご覧ください。

以上がCSSで背景プロパティを設定する方法（詳しく解説）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。