CSSの背景関連の属性とは何ですか? CSS 背景プロパティの概要-CSSチュートリアル-php.cn

CSSの背景関連の属性とは何ですか? CSS 背景プロパティの概要

不言

リリース： 2018-08-18 13:45:05

オリジナル

5457 人が閲覧しました

CSS 背景に関連する属性は何ですか?以下の記事では、CSS の背景プロパティについて説明します。必要な方は参考にしてください。

1. CSS の背景属性は、コンテンツの背景色を設定します:
属性:
色
継承; 親スタイル

box.html

<!doctype html>
<html>
<head>
    <mate charset="utf-8">
    <title>背景</title>
    <link href="box.css" type="text/css" rel="stylesheet">
    </head>
    <body>
    <p为内容设置背景色：background-color；</p>
    </body>
    </html>

ログイン後にコピー

box.css

body{    
background-color:#123456;
}

ログイン後にコピー

を継承します。 2. CSS の背景属性は、コンテンツの背景を画像の背景に設定します: url();

body{
    background-color:#123456;    
    background-image:url(image.png);
    }

ログイン後にコピー

3. CSSの背景属性の背景画像のbackground-attachmentを修正

(ブラウザ上の画像を固定するにはCSSのbackground-attachment属性を使用します。スクロールバーをドラッグしても、スクロールに合わせて背景画像はスクロールしません) 属性値: scroll; 背景画像はコンテンツとともにスクロールします。デフォルト値は固定です。
継承します。親クラスのスタイル

box.css

body{
    background-color:#123456;    
    background-image:url(image.png);    
    background-attachment:fixed;    
    font-size: 45px;
    }

ログイン後にコピー

4、CSS 背景属性背景画像タイル

属性値:

繰り返し;タイルの背景画像;デフォルト 繰り返しなし、画像を並べて表示しないでください。水平方向に繰り返し x;タイルを並べる repert-y; 縦方向に並べる

box.css

 body{
     background-color:#123456;    
     background-image:url(image.png);    
     background-attachment:fixed;    
     font-size: 45px;    
     background-repeat: repeat-y;    
}

ログイン後にコピー

5. CSS 背景属性背景画像の配置

属性値:

top; middle

bottom; Right left;Left inherit;親クラスのスタイルを継承します
スタイル:
xxxpx、xxxpx
xxx%、xxx%
xxxpx,top;

box.css

body{
    background-color:#123456;    
    background-image:url(image.png);    
    background-attachment:fixed;    
    font-size: 45px;    
    background-repeat:no-repeat;    
    background-position:left;
    }

ログイン後にコピー

関連おすすめ:

あなたの知らないCSSの背景—CSSの背景プロパティを徹底解説

CSSのbackgroundプロパティを詳しく解説

以上がCSSの背景関連の属性とは何ですか? CSS 背景プロパティの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。