CSS3에서 일반적으로 사용되는 배경 속성은 무엇입니까?-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

CSS3에서 일반적으로 사용되는 배경 속성은 무엇입니까?

青灯夜游

Jan 12, 2022 pm 05:49 PM

css3배경 속성

일반적으로 사용되는 배경 속성은 1. 배경색, 2. 배경 이미지, 4. 배경 위치, 6. 배경입니다.

CSS3에서 일반적으로 사용되는 배경 속성은 무엇입니까?

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

웹페이지를 만들 때 웹페이지를 더욱 아름답게 만들고 방문자의 관심을 끌기 위해 배경색과 배경 이미지를 웹페이지에 추가해야 하는 경우가 많습니다. CSS는 HTML 요소의 배경 효과를 설정하기 위해 다음과 같은 일련의 속성을 제공합니다.

배경색: 요소의 배경색을 설정합니다.
배경 이미지: 요소의 배경 이미지를 설정합니다. -repeat : 배경 이미지가 반복되는지 여부를 제어합니다.
background-attachment: 배경 이미지가 창과 함께 스크롤되는지 여부를 제어합니다.
background-position: 요소에서 배경 이미지의 위치를 제어합니다. 배경 이미지의 크기를 설정합니다.
배경 이미지 위치를 기준으로 background-position 속성을 설정합니다.
배경 클립: 배경 이미지의 표시 영역을 설정합니다. : 배경 속성의 약어로, 하나의 명령문으로 모든 배경 속성을 설정할 수 있습니다.
1. background-color 속성을 사용하여 요소의 배경색을 설정할 수 있습니다. 이 속성은 다음 속성 값을 지원합니다.
value

color_name

특정 색상 이름을 가진 요소의 배경색 설정(예: 빨간색)[예] background-color를 사용하여 요소의 배경색을 설정합니다.

复制纯文本复制

hex_number	16진수 코드를 사용하여 요소의 배경색 설정(예: #ff0000)
rgb_number	사용 요소 배경색을 설정하는 rgb() 함수 배경색(예: 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 속성 데모

실행 결과에서 볼 수 있듯이 background-color 속성은 요소에 대해 단색 배경을 설정할 수 있습니다. 요소의 내용, 패딩 및 테두리 영역(또한 테두리 및 그 안에 있는 모든 영역으로 이해될 수 있음)을 채우고 요소 테두리 외부 영역(여백)에는 영향을 미치지 않습니다.

배경 이미지는 요소의 배경 이미지를 설정하는 데 사용됩니다. 기본적으로 브라우저는 요소 콘텐츠의 왼쪽 상단에서 시작됩니다(패딩이 있는 경우 상단에서 시작됩니다). 요소 패딩 영역의 왼쪽 모서리 시작), 배경 이미지를 가로 및 세로로 반복하여 전체 요소 영역을 채우고, background-repeat 속성을 사용하여 배경 이미지의 반복 여부 및 방법을 제어할 수 있습니다.

Background-image 속성의 선택 값 은 다음과 같습니다:

값

설명

url('URL')

이미지를 가리키는 경로는 다음과 같습니다. url()을 함수로 생각하세요. 괄호 안의 URL은 이미지의 특정 경로입니다

none 기본값, 배경 이미지가 표시되지 않습니다

inherit 배경 이미지 설정 상속 상위 요소에서

【示例】使用 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 属性用来设置背景图像是否重复或如何重复，该属性的可选值如下：

值	描述
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>

运行结果如下图所示：