搜索
首页web前端前端问答css3中常用的背景属性有哪几个

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中常用的背景属性有哪几个

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

在制作网页时我们往往需要在网页中添加一些背景颜色、背景图像让网页更加美观，吸引访问者的眼球。CSS 中提供了一系列用于设置 HTML 元素背景效果的属性，如下所示：
  • background-color：设置元素的背景颜色；
  • background-image：设置元素的背景图像；
  • background-repeat：控制背景图像是否重复；
  • background-attachment：控制背景图像是否跟随窗口滚动；
  • background-position：控制背景图像在元素中的位置；
  • background-size：设置背景图像的尺寸；
  • background-origin：设置 background-position 属性相对于什么位置来定位背景图像；
  • background-clip：设置背景图像的显示区域；
  • background：背景属性的缩写，可以在一个声明中设置所有的背景属性。

1. background-color

您可以使用 background-color 属性为元素设置一个背景颜色，该属性支持以下几种属性值：

值 描述
color_name 使用具体颜色名称为元素设置背景颜色（例如 red）
hex_number 使用十六进制码为元素设置背景颜色（例如 #ff0000）
rgb_number 使用 rgb() 函数为元素设置背景颜色（例如 rgb(255,0,0)）
transparent 默认值，设置背景颜色为透明，大多数情况下我们并不会用到它。但如果您不希望某个元素拥有背景颜色，或者不希望用户对浏览器的设置（比如开启夜间模式、护眼模式）影响到您的设计，那么就可以使用 transparent 来将颜色设置为透明的
inherit 从父元素继承对背景颜色的设置

【示例】使用 background-color 为元素设置背景颜色：
<!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>
运行结果如下图所示：

1.gif
图：background-color 属性演示

通过运行结果可以看出 background-color 属性能够为元素设置一种纯色的背景，这种颜色会填充元素的内容、内边距以及边框区域（也可以理解为边框及以内的所有区域），对于元素边框以外的区域（外边距）则没有影响。

2. background-image

background-image 用来为某个元素设置背景图像，默认情况下浏览器会从元素内容的左上角开始（若有内边距则从元素内边距区域的左上角开始），在水平和垂直方向上重复背景图像，以填充整个元素区域，您可以使用 background-repeat 属性来控制背景图像是否重复或如何重复。

background-image 属性的可选值如下：

值 描述
url('URL') 指向图像的路径，可以将 url() 看作是一个函数，括号中的 URL 为图像的具体路径
none 默认值，不显示背景图像
inherit 从父元素继承背景图像的设置

【示例】使用 background-image 属性将图片【8.gif】设置为元素的背景图像：
<!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>
运行结果如下图所示：

2.gif
图：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>
运行结果如下图所示：

3.gif
图：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>
运行结果如下图所示：

4.gif
图：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>
运行结果如下图所示：

5.gif
图：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>
运行结果如下图所示：

6.gif
图：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>
运行结果如下图所示：

7.gif
图：多重背景层叠效果 

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

以上是css3中常用的背景属性有哪几个的详细内容。更多信息请关注PHP中文网其他相关文章！

声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
相关文章
CSS：使用ID选择器不好吗？CSS：使用ID选择器不好吗？May 13, 2025 am 12:14 AM

使用ID选择器在CSS中并非固有地不好，但应谨慎使用。1）ID选择器适用于唯一元素或JavaScript钩子。2）对于一般样式，应使用类选择器，因为它们更灵活和可维护。通过平衡ID和类的使用，可以实现更robust和efficient的CSS架构。

HTML5：2024年的目标HTML5：2024年的目标May 13, 2025 am 12:13 AM

html5'sgoalsin2024focusonrefinement和optimization，notnewfeatures.1）增强performandemandeffifice throughOptimizedRendering.2）risteccessibilitywithrefinedibilitywithRefineDatientAttributesAndEllements.3）expliencernsandelements.3）explastsecurityConcerns，尤其是withercervion.4）

HTML5试图改进的主要领域是什么？HTML5试图改进的主要领域是什么？May 13, 2025 am 12:12 AM

html5aimedtotoimprovewebdevelopmentInfourKeyAreas：1）多中心供应，2）语义结构，3）formcapabilities.1）offlineandstorageoptions.1）html5intoryements html5introctosements introdements and toctosements and toctosements，简化了inifyingmediaembedingmediabbeddingingandenhangingusexperience.2）newsements.2）

CSS ID和类：常见错误CSS ID和类：常见错误May 13, 2025 am 12:11 AM

IDsshouldbeusedforJavaScripthooks,whileclassesarebetterforstyling.1)Useclassesforstylingtoallowforeasierreuseandavoidspecificityissues.2)UseIDsforJavaScripthookstouniquelyidentifyelements.3)Avoiddeepnestingtokeepselectorssimpleandimproveperformance.4

课程和ID选择器之间的差异是什么？课程和ID选择器之间的差异是什么？May 12, 2025 am 12:13 AM

classSelectorSareVersAtileAndReusable，whileIdSelectorSareEctorSareEniqueAndspecific.1）useclassSelectors（表示）

CSS IDS vs类：真正的差异CSS IDS vs类：真正的差异May 12, 2025 am 12:10 AM

IDSareuniqueIdentifiersForsingLelements，而LileclassesstyLemultiplelements.1）useidsforuniquelementsand andjavascripthooks.2）useclassesforporporporblesable，flexiblestylestylestylinglingactossmultiplelements。

CSS：如果我只使用课程怎么办？CSS：如果我只使用课程怎么办？May 12, 2025 am 12:09 AM

使用仅类选择器可以提高代码的重用性和可维护性，但需要管理类名和优先级。1.提高重用性和灵活性，2.组合多个类创建复杂样式，3.可能导致冗长类名和优先级问题，4.性能影响微小，5.遵循最佳实践如简洁命名和使用约定。

CSS中的ID和类选择器：初学者指南CSS中的ID和类选择器：初学者指南May 12, 2025 am 12:06 AM

ID和class选择器在CSS中分别用于唯一和多元素的样式设置。1.ID选择器(#)适用于单一元素，如特定导航菜单。2.Class选择器(.)用于多元素，如统一按钮样式。应谨慎使用ID，避免过度特异性，并优先使用class以提高样式复用性和灵活性。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

如何修复KB5055612无法在Windows 10中安装？
4 周前ByDDD
<🎜>：种植花园 - 完整的突变指南
3 周前ByDDD
<🎜>：泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前By尊渡假赌尊渡假赌尊渡假赌
Mandragora：巫婆树的耳语 - 如何解锁抓钩
3 周前By尊渡假赌尊渡假赌尊渡假赌
北端：融合系统，解释
3 周前By尊渡假赌尊渡假赌尊渡假赌
显示更多

热工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

显示更多

热门话题

Java教程
1668
14
CakePHP 教程
1428
52
Laravel 教程
1329
25
PHP教程
1273
29
C# 教程
1256
24
显示更多