css3で一般的に使用される背景属性は何ですか-フロントエンドQ&A-php.cn

background-color 属性を使用して要素の背景色を設定できます。この属性は次の属性値をサポートします:

3. background-repeat

4. background-position

5. background-size

6. background

ホームページ

ウェブフロントエンド

フロントエンドQ&A

css3で一般的に使用される背景属性は何ですか

青灯夜游

Jan 12, 2022 pm 05:49 PM

css3 背景のプロパティ

一般的に使用される背景属性は次のとおりです: 1.background-color、2.background-image、3.background-repeat、4.background-position、5.background-size、6.background。

css3で一般的に使用される背景属性は何ですか

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

Web ページを作成するとき、Web ページをより美しくし、訪問者の注目を集めるために、Web ページに背景色や背景画像を追加する必要があることがよくあります。 CSS は、次のように HTML 要素の背景効果を設定するための一連のプロパティを提供します:

background-color: 要素の背景色を設定します;
background-image: 設定します要素の背景画像;
background-repeat: 背景画像を繰り返すかどうかを制御します;
background-attachment: 背景画像がウィンドウのスクロールに追従するかどうかを制御します;
background-position: 要素内の背景画像の位置を制御します;
background-size: 背景画像のサイズを設定します;
background-origin: 背景位置を設定します背景画像を配置する位置を基準とした属性;
background-clip: 背景画像の表示領域を設定;
background: 背景属性の略称、すべての背景属性を指定できます。 1 つのステートメントで設定します。

#1.background-color

background-color 属性を使用して要素の背景色を設定できます。この属性は次の属性値をサポートします:

ValueDescriptioncolor_name特定の色の名前を使用して要素の背景色を設定します (例: 赤) hex_number16 進コードを使用して要素の背景色を設定します (例: #ff0000) rgb_numberrgb() 関数を使用して要素の背景色を設定します (たとえば、rgb(255,0,0)) transparentデフォルト値、背景色を透明に設定します。ほとんどの場合は使用しません。ただし、要素に背景色を持たせたくない場合、またはユーザーのブラウザ設定 (夜間モードや目の保護モードをオンにするなど) がデザインに影響を与えたくない場合は、透明を使用して背景色を設定できます。色を透明に変更inherit親要素から背景色の設定を継承##[例]要素の背景色を設定します:

复制纯文本复制

ログイン後にコピー

<!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        color: white;
        background-color: blue;
        margin: 20px;   /*设置外边距为 20px*/
        padding: 20px;  /*设置内边距为 20px*/
        border: 10px dotted yellow;  /*设置一个宽 10px 的黄色虚线边框*/
    }
    </style>
</head>
<body>
    <p id="bg">background-color 属性</p>
</body>
</html>

ログイン後にコピー

<!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        color: white;
        background-color: blue;
        margin: 20px;   /*设置外边距为 20px*/
        padding: 20px;  /*设置内边距为 20px*/
        border: 10px dotted yellow;  /*设置一个宽 10px 的黄色虚线边框*/
    }
    </style>
</head>
<body>
    <p id="bg">background-color 属性</p>
</body>
</html>

ログイン後にコピー

実行結果は以下のようになります:

図:background-color 属性のデモンストレーション css3で一般的に使用される背景属性は何ですか

実行結果から、background-color 属性によって要素の背景を単色の背景に設定できることがわかります。この色は塗りつぶされます。要素のコンテンツ、パディング、および境界領域 (境界およびその中のすべての領域とも理解できます) であり、要素の境界の外側の領域 (マージン) には影響しません。

2.background-image
background-image は要素の背景画像を設定するために使用されます。デフォルトでは、ブラウザは要素コンテンツの左上隅から開始します (パディングがある場合は、要素の内側から開始されます) マージン領域の左上隅から開始して、背景画像が要素領域全体を埋めるために水平方向と垂直方向に繰り返されます。background-repeat プロパティを使用して、その有無または方法を制御できます。背景画像が繰り返されます。

background-image 属性のオプションの値は次のとおりです:

Valueurl('URL')noneinherit#
【示例】使用 background-image 属性将图片【 css3で一般的に使用される背景属性は何ですか

】设置为元素的背景图像：

<!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        color: red;
        background-image: url(&#39;./bg-image.png&#39;);
        margin: 20px;   /*设置外边距为 20px*/
        padding: 20px;  /*设置内边距为 20px*/
        border: 10px dotted red;  /*设置一个宽 10px 的红色虚线边框*/
    }
    </style>
</head>
<body>
    <p id="bg">background-image 属性</p>
</body>
</html>

ログイン後にコピー

<!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        color: red;
        background-image: url(&#39;./bg-image.png&#39;);
        margin: 20px;   /*设置外边距为 20px*/
        padding: 20px;  /*设置内边距为 20px*/
        border: 10px dotted red;  /*设置一个宽 10px 的红色虚线边框*/
    }
    </style>
</head>
<body>
    <p id="bg">background-image 属性</p>
</body>
</html>

ログイン後にコピー

运行结果如下图所示：

图：background-image 属性演示

背景图像的覆盖区域与背景颜色相同，同样会填充元素的内容、内边距以及边框区域，对于元素边框以外的区域（外边距）则没有影响。

3. background-repeat

默认情况下背景图像会从元素内容的左上角开始（若有内边距则从元素内边距区域的左上角开始），在水平和垂直方向上重复背景图像以填充整个元素区域（不包括元素的外边距区域），您可以使用 background-repeat 属性用来设置背景图像是否重复或如何重复，该属性的可选值如下：

Description
画像を指すパス。url() は関数と考えることができます。括弧内の URL は画像の特定のパスです。
デフォルト値、背景画像を表示しません
設定を継承します親要素の背景画像の

值	描述
repeat	默认值，背景图像将在垂直方向和水平方向上重复
repeat-x	背景图像仅在水平方向上重复
repeat-y	背景图像仅在垂直方向上重复
no-repeat	背景图像仅显示一次，不在任何方向上重复
inherit	从父元素继承 background-repeat 属性的设置

【示例】使用 background-repeat 属性让背景图像只在水平方向上重复：

<!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        color: black;
        background-image: url(&#39;./bg-image.png&#39;);
        background-repeat: repeat-x;
        margin: 20px;   /*设置外边距为 20px*/
        padding: 20px;  /*设置内边距为 20px*/
        border: 10px dotted red;  /*设置一个宽 10px 的红色虚线边框*/
    }
    </style>
</head>
<body>
    <p id="bg">background-repeat 属性</p>
</body>
</html>

ログイン後にコピー

<!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        color: black;
        background-image: url(&#39;./bg-image.png&#39;);
        background-repeat: repeat-x;
        margin: 20px;   /*设置外边距为 20px*/
        padding: 20px;  /*设置内边距为 20px*/
        border: 10px dotted red;  /*设置一个宽 10px 的红色虚线边框*/
    }
    </style>
</head>
<body>
    <p id="bg">background-repeat 属性</p>
</body>
</html>

ログイン後にコピー

运行结果如下图所示：

图：background-repeat 属性演示

4. background-position

background-position 属性用来设置背景图像的起始位置，该属性的可选值如下：

值	描述
left top（左上）、 left center（左中）、 left bottom（左下）、 right top（右上）、 right center（右中）、 right bottom（右下）、 center top（中上）、 center center（居中）、 center bottom（中下）	使用一些关键词表示背景图像的位置，如果您仅设置第一个关键词，那么第二个将默认为 center
x% y%	使用百分比表示背景图像距离元素左上角的距离，x% 为水平方向，y% 为垂直方向，左上角为 0% 0%，右下角是 100% 100%，如果您仅设置第一个值，那么另一个值将是 50%，默认值为 0% 0%
xpos ypos	使用像素（px）或者其它 CSS 单位表示背景图像距离元素左上角的距离，xpos 为水平方向，ypos 为垂直方向，左上角为 0px 0px，右下角视元素的尺寸而定，百分比和单位的形式可以混用，如果您仅设置第一个值，那么另一个值将默认为 50%

【示例】使用 background-position 属性来设置背景图像的位置：

<!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        color: black;
        background-image: url(&#39;./bg-image.png&#39;);
        background-repeat: no-repeat;
        background-position: 0% 50%;
        margin: 20px;   /*设置外边距为 20px*/
        padding: 20px;  /*设置内边距为 20px*/
        border: 10px dotted red;  /*设置一个宽 10px 的红色虚线边框*/
    }
    </style>
</head>
<body>
    <p id="bg">background-position 属性</p>
</body>
</html>

ログイン後にコピー

<!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        color: black;
        background-image: url(&#39;./bg-image.png&#39;);
        background-repeat: no-repeat;
        background-position: 0% 50%;
        margin: 20px;   /*设置外边距为 20px*/
        padding: 20px;  /*设置内边距为 20px*/
        border: 10px dotted red;  /*设置一个宽 10px 的红色虚线边框*/
    }
    </style>
</head>
<body>
    <p id="bg">background-position 属性</p>
</body>
</html>

ログイン後にコピー

运行结果如下图所示：

图：background-position 属性演示

5. background-size

background-size 属性用来设置背景图像的尺寸，该属性的可选值如下：

值	描述
xpos ypos	使用像素（px）或其它 CSS 单位来设置背景图像的高度和宽度，xpos 表示宽度，ypos 表示高度，如果只设置第一个值，那么第二个值将被设置为默认值 auto（自动）
x% y%	使用百分比表示背景图像相对于所在元素宽度与高度的百分比，x% 表示宽度，y% 表示高度，如果只设置第一个值，那么第二个值将被设置为默认值 auto（自动）
cover	保持背景图像的横纵比例并将图像缩放至足够大，使背景图像可以完全覆盖元素所在的区域，这么做可能会导致背景图像的某些部分超出元素区域而无法显示
contain	保持背景图像的横纵比例并将图像缩放至足够大，使背景图像可以完整的显示在元素所在区域，背景图像可能无法完全覆盖整个元素区域

【示例】使用 background-size 属性设置背景图像的尺寸，并将背景图像横向铺满整个元素区域：

<!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    body {
        background-image: url(&#39;./bg-image.png&#39;);
        background-repeat: repeat-x;
        background-size: contain;
    }
    </style>
</head>
<body>
    <p>background-size 属性</p>
</body>
</html>

ログイン後にコピー

<!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    body {
        background-image: url(&#39;./bg-image.png&#39;);
        background-repeat: repeat-x;
        background-size: contain;
    }
    </style>
</head>
<body>
    <p>background-size 属性</p>
</body>
</html>

ログイン後にコピー

运行结果如下图所示：

图：background-size 属性演示

6. background

background 是背景属性的简写形式，通过它不仅可以为元素设置某个背景属性，还可以同时设置多个或者所有的背景属性。在设置多个背景属性时并没有固定的顺序，但推荐使用如下顺序进行设置：

background-color || background-image || background-position [/ background-size]? || background-repeat || background-attachment || background-origin || background-clip

ログイン後にコピー

在设置多个背景属性时，有以下几点需要注意：

每个属性之间使用空格进行分隔；
如果同时设置 background-position 和 background-size 属性，这两个属性之间需要使用斜线 / 分隔，并且需要遵循 background-position 属性在前 background-size 属性在后的顺序；
如果同时设置 background-origin 和 background-clip 属性，需要遵循 background-origin 属性在前 background-clip 属性在后的顺序。如果 background-origin 与 background-clip 属性的值相同，则可以只设置一个值。

【示例】通过 background 同时设置多个背景属性：

<!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        background: #ccc url(&#39;./bg-image.png&#39;) 0px 0px/contain repeat-x border-box;
        margin: 20px;   /*设置外边距为 20px*/
        padding: 20px;  /*设置内边距为 20px*/
        border: 10px dotted red;  /*设置一个宽 10px 的红色虚线边框*/
    }
    </style>
</head>
<body>
    <p id="bg">background 属性</p>
</body>
</html>

ログイン後にコピー

<!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        background: #ccc url(&#39;./bg-image.png&#39;) 0px 0px/contain repeat-x border-box;
        margin: 20px;   /*设置外边距为 20px*/
        padding: 20px;  /*设置内边距为 20px*/
        border: 10px dotted red;  /*设置一个宽 10px 的红色虚线边框*/
    }
    </style>
</head>
<body>
    <p id="bg">background 属性</p>
</body>
</html>

ログイン後にコピー

运行结果如下图所示：

图：background 属性演示

background 属性还支持设置多组属性值（比如上面示例中的 #ccc url('./bg-image.png') 0px 0px/contain repeat-x border-box就可以看作是一组属性），每组属性值之间使用逗号,分隔。但需要注意的是 background-color 属性不能设置多个，并且只能在最后一组属性值中设置。

如果设置的多组属性中，背景图像之间存在重叠，那么前面设置的背景图像会覆盖在后面的背景图像之上。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    body {
        background: url("./css.png") 10px 10px/60px 60px no-repeat padding-box,
                    url("./css.png") 50px 30px/120px 120px no-repeat content-box,
                    url("./css.png") 140px 40px/200px 100px no-repeat content-box #58a;
    }
    </style>
</head>
<body>
</body>
</html>

ログイン後にコピー

<!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    body {
        background: url("./css.png") 10px 10px/60px 60px no-repeat padding-box,
                    url("./css.png") 50px 30px/120px 120px no-repeat content-box,
                    url("./css.png") 140px 40px/200px 100px no-repeat content-box #58a;
    }
    </style>
</head>
<body>
</body>
</html>

ログイン後にコピー

运行结果如下图所示：

图：多重背景层叠效果

（学习视频分享：css视频教程）

以上がcss3で一般的に使用される背景属性は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Java チュートリアル

1668

CakePHP チュートリアル

1428

Laravel チュートリアル

1329

PHP チュートリアル

1273

C# チュートリアル

1256

Related knowledge

純粋な CSS3 で波の効果を実現するにはどうすればよいですか? (コード例) Jun 28, 2022 pm 01:39 PM

純粋な CSS3 で波の効果を実現するにはどうすればよいですか?この記事ではSVGとCSSアニメーションを使って波のエフェクトを作成する方法をご紹介しますので、お役に立てれば幸いです。

CSSを上手に使って色々な変わった形のボタンを実現（コード付き） Jul 19, 2022 am 11:28 AM

この記事では、頻繁に登場する様々な奇妙な形のボタンをCSSを使って簡単に実現する方法を紹介しますので、ぜひ参考にしてください。

スペースを取らずにCSS内の要素を非表示にする方法 Jun 01, 2022 pm 07:15 PM

2 つの方法: 1. display 属性を使用して、要素に「display:none;」スタイルを追加するだけです。 2. Position 属性と top 属性を使用して、要素の絶対位置を設定し、要素を非表示にします。要素に「position:absolute;top:-9999px;」スタイルを追加するだけです。

CSS3でレースボーダーを実装する方法 Sep 16, 2022 pm 07:11 PM

CSS では、border-image 属性を使用してレースの境界線を実現できます。 border-image 属性では、画像を使用して境界線を作成できます。つまり、境界線に背景画像を追加できます。背景画像をレーススタイルとして指定するだけで済みます。構文「border-image: url (画像パス) は、内側への画像境界線の幅。開始を繰り返すかどうか;"。

テキストカルーセルと画像カルーセルも純粋な CSS を使用して実現できることがわかりました。 Jun 10, 2022 pm 01:00 PM

テキストカルーセルと画像カルーセルを作成するにはどうすればよいですか?皆さんが最初に考えるのはjsを使うかどうかですが、実はテキストカルーセルや画像カルーセルも純粋なCSSでも実現できますので実装方法を見ていきましょう。

CSS3でマウスクリックで画像を拡大する方法 Apr 25, 2022 pm 04:52 PM

実装方法: 1. ":active" セレクターを使用して、画像上のマウスクリックの状態を選択します; 2. 変換属性とscale() 関数を使用して、画像の拡大効果を実現します。構文 "img:active {transform : スケール(x 軸倍率、y 軸倍率);}"。

CSS3でアニメーションの回転速度を設定する方法 Apr 28, 2022 pm 04:32 PM

CSS3 では、「animation-timing-function」属性を使用してアニメーションの回転速度を設定できます。この属性は、アニメーションがサイクルを完了する方法を指定し、アニメーションの速度曲線を設定するために使用されます。構文は「element {アニメーションタイミング関数: 速度属性値;}"。

CSS3 線形グラデーションで三角形を実現できますか? Apr 25, 2022 pm 02:47 PM

CSS3 の線形グラデーションは三角形を実現できます。45 度の線形グラデーションを作成し、そのグラデーションの色を 2 つの固定色 (1 つは三角形の色、もう 1 つは透明色) に設定するだけです。構文 "linear-gradient(45deg, color value) 、カラー値 50%、透明色 50%、透明色 100%)」。

See all articles

css3で一般的に使用される背景属性は何ですか

background-color 属性を使用して要素の背景色を設定できます。この属性は次の属性値をサポートします:

3. background-repeat

4. background-position

5. background-size

6. background

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック