很多朋友对于background属性和background属性有哪些不太懂，今天就由小编来为大家分享，希望可以帮助到大家，下面一起来看看吧！
在网页设计中，CSS（层叠样式表）是不可或缺的工具之一。而CSS中的`background`属性，则是赋予网页元素背景样式的重要属性。今天，我们就来深入探讨一下`background`属性的用法、技巧以及注意事项。
一、背景颜色
背景颜色是`background`属性中最基础的部分。使用`background-color`可以设置元素的背景颜色。
“`css
/* 设置元素的背景颜色为红色 */
div {
background-color: red;
}
“`
表格：
| 颜色值类型 | 例子 |
|---|---|
| 颜色名 | red,blue,yellow |
| 十六进制 | ff0000,00ff00,0000ff |
| RGB | rgb(255,0,0),rgb(0,255,0),rgb(0,0,255) |
| RGBA | rgba(255,0,0,0.5),rgba(0,255,0,0.5),rgba(0,0,255,0.5) |
二、背景图片
除了背景颜色，背景图片也是`background`属性中常用的部分。使用`background-image`可以设置元素的背景图片。
“`css
/* 设置元素的背景图片为一张图片 */
div {
background-image: url(‘image.jpg’);
}
“`
表格：
| 图片格式 | 优点 | 缺点 |
|---|---|---|
| JPEG | 压缩率高，适合照片 | 不支持透明度 |
| PNG | 支持透明度，适合图标 | 压缩率不如JPEG |
| GIF | 支持动画，适合小图标 | 文件体积较大 |
三、背景位置
背景位置用于控制背景图片在元素中的显示位置。使用`background-position`可以设置背景图片的位置。
“`css
/* 设置背景图片在元素中的显示位置为左上角 */
div {
background-position: 0 0;
}
“`
表格：
| 值类型 | 例子 |
|---|---|
| 百分比 | 50%50% |
| 像素值 | 10px20px |
| 关键字 | top,bottom,left,right |
四、背景重复
背景重复用于控制背景图片在元素中的重复方式。使用`background-repeat`可以设置背景图片的重复方式。
“`css
/* 设置背景图片在元素中水平、垂直方向重复 */
div {
background-repeat: repeat repeat;
}
“`
表格：
| 值类型 | 例子 |
|---|---|
| repeat | repeatrepeat |
| repeat-x | repeat-x |
| repeat-y | repeat-y |
| no-repeat | no-repeat |
五、背景尺寸
背景尺寸用于控制背景图片在元素中的显示大小。使用`background-size`可以设置背景图片的尺寸。
“`css
/* 设置背景图片在元素中的显示大小为100% */
div {
background-size: 100% 100%;
}
“`
表格：
| 值类型 | 例子 |
|---|---|
| 百分比 | 100%100% |
| 像素值 | 200px200px |
| 关键字 | cover,contain |
六、背景附件
背景附件用于控制背景图片是否随着页面滚动而滚动。使用`background-attachment`可以设置背景图片的滚动方式。
“`css
/* 设置背景图片不随页面滚动而滚动 */
div {
background-attachment: fixed;
}
“`
表格：
| 值类型 | 例子 |
|---|---|
| scroll | scroll |
| fixed | fixed |
七、背景原点
背景原点用于控制背景图片的起始位置。使用`background-origin`可以设置背景图片的原点位置。
“`css
/* 设置背景图片的原点位置为padding-box */
div {
background-origin: padding-box;
}
“`
表格：
| 值类型 | 例子 |
|---|---|
| padding-box | padding-box |
| border-box | border-box |
| content-box | content-box |
八、总结
通过对`background`属性的深入解析，我们可以更好地理解如何为网页元素设置背景样式。在实际应用中，我们可以根据需求灵活运用这些属性，为网页增添丰富的视觉效果。
注意：本文仅供参考，具体实现时还需根据实际情况进行调整。希望这篇文章能帮助你更好地掌握`background`属性。
background有哪些属性
background-attachment:scroll| fixedscroll:背景图像是随对象内容滚动。fixed：背景图像固定。background-color：transparent| color transparent：背景透明色。 color：指定颜色、background-image：none| urlnone：无背景图。url：使用绝对或相对地址指定背景图像。background-position: length|| length length: 百分数|由浮点数字和单位标识符组成的长度值。
background-position: position|| positionposition: top| center| bottom| left| center| right
background-positionX: length| left| center| rightlength: 百分数|由浮点数字和单位标识符组成的长度值。 left: 居左，center: 居中，right: 居右
background-positionY: length| top| center| bottom length: 百分数|由浮点数字和单位标识符组成的长度值。left: 居左，center: 居中，right: 居右
background-repeat: repeat| no-repeat| repeat-x| repeat-y repeat: 背景图像在纵向和横向上平铺，no-repeat: 背景图像不平铺，repeat-x: 背景图像在横向上平铺，repeat-y: 背景图像在纵向平铺
Css3——background属性详解
background：背景。在css里面作为css属性一成员，通过该属性可设置背景图片、背景颜色、背景图片截取等样式。而仅仅一个background又具有多个子属性。
颜色名称，如： background-color:red;
十六进制背景色，如： background-color:#f00;;
rgb颜色，这里如果是rgba，a表示透明程度，为0全透明，为1为完全不透明，
如： background-color:rgb(255,0,0.3);;
特殊值：transparent，透明色： background-color:transparent;
background-image属性用于为一个元素设置一个或多个背景图片，多个背景图片之间以逗号隔开。
一张图片： background-image: url(img/a.jpg);
多张图片： background-image: url(img/a.jpg),url(img/b.jpg);
特殊值：none，不显示背景图像
background-image: none;
background-repeat属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。
常用的4个值：
repeat：水平和垂直方向都重复图像， background-repeat: repeat;
repeat-x：水平方向重复图像
repeat-y：垂直方向重复图像
no-repeat：图像不重复
规定背景图像是否固定或者随着页面的其余部分滚动。
scroll：背景图像相对于页面不动，会随着网页的滚动而移动，默认
fixed：背景图像相对于浏览器窗口不动，内容滚动的时候背景图像不动
background-attachment: fixed;
第一个值为横坐标，第二个值为纵坐标。默认值为：(0% 0%)。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。
例如： background-position: right；代表背景图右侧，垂直方向居中的位置。
百分比位置，如：background-position: 20% 20%;
具体像素位置，如：background-position: 20px 20px;
background-size设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
单张图片的背景大小可以使用以下三种方法中的一种来规定：
当通过宽度和高度值来设定尺寸时，你可以提供一或者两个数值:
每个值可以是<length>,是<percentage>,或者[auto]。
示例：
为了设定超过一张以上的图片尺寸时，需要提供多项数值，它们通过逗号分隔。
CSS部分背景图片分辨率为427*640
分别给box的background-size属性添加不同的属性值，会产生不同的效果。
1、长度：可以用px、em、rem等指定背景图片大小，不能为负值。
background-clip裁剪，通常和background-origin一起使用，决定设置元素的背景（背景图片或颜色）是否显示。
注：background-clip只是将背景和背景色粗暴的裁剪。
该属性有四个值
border-box
背景延伸至边框外沿（但是在边框下层）。 background-origin: border-box;
background-origin规定了指定背景图片[ background-image ]属性的原点位置的背景相对区域.
border-box
背景图片的摆放以border区域为参考
padding-box
背景图片的摆放以padding区域为参考
content-box
背景图片的摆放以content区域为参考
样式：
先看一下background-origin属性。
先看一下background-clip属性。
这就印证了background-clip只是将背景和背景色粗暴的裁剪。
好的，以上就是我对background的各个属性的理解，实际应用时可能会有部分出入，我们只需要掌握background-color、background-image、background-repeat、background-position、background-size这几个常用的属性即可。
欢迎大家一起交流，讨论。
一文搞定background属性及属性值,css背景属性全家桶
盒模型可以看成由元素外边距（margin）、元素边框（border）、元素内边距（padding）和元素内容（content） 4部分组成，不过这只是从2D的视角来看盒模型的组成，而今天笔者将阐述如何从3D的视角看待盒模型的组成。
从2D视角看盒模型示意图：
从3D视角看盒模型示意图：
背景图片在z轴上比背景颜色更靠近用户，背景图片在完全不透明的情况下，会完全遮盖住背景颜色。
背景图片的定位参考系与背景裁剪：
background-origin的默认值是padding-box，代表的是背景图片开始的原点。
background-origin:border-box;图像从边框开始显示，表示以表框左上角为原点展开背景图片。
background-origin:padding-box;图像从内边距开始显示（默认），表示以内填充区左上角为原点展开背景图片。
background-origin:content-box;图像从内容开始显示，表示以内容区的左上角为原点展开背景图片。
背景裁剪的默认值是border-box，背景从边框（包括border区域）开始裁剪，表示裁剪超出边框区的内容。
background-clip:border-box;图像从边框（包括border区域）开始裁剪（默认），表示裁剪超出边框区的内容。
background-clip:padding-box;图像从内边距（包括padding）开始裁剪，表示裁剪超出内填充区的内容。
background-clip:content-box;图像从内容（包括content）开始裁剪，表示裁剪超出内容区的内容。
还有一个取值是background-clip:text，表示文本剪裁(字体加背景)。
background-clip的兼容写法：
/*Firefox3.6-*/
-moz-background-clip: border-box|| padding-box|| context-box|| no-clip
/*Webkit*/
-webkit-background-clip: border-box|| padding-box|| context-box|| no-clip|| text
/*opera*/
-o-background-clip: border-box|| padding-box|| context-box|| no-clip
/*W3C标准 Firefox4.0+*/
background-clip: border-box|| padding-box|| context-box|| no-clip|| text
浏览器兼容问题：
-webkit-谷歌浏览器的内核标识码
-moz-火狐浏览器的内核标识码
-o-欧朋浏览器的内核标识码
-ms- IE浏览器的内核标识码
注意：要和-webkit-text-fill-color属性设置为transparent，确保文字的填充色为透明色，一起使用。
/*注意：使用border-box的时候，border颜色必须是rgba颜色，不然会没有效果*/
对于background-clip和background-origin的区别在于，background-clip是针对背景图片的裁剪，而background-origin则是设置背景图片的起始点。
background-size的设置方法：
设置背景图片高度和宽度（10px 30px）。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)。
将计算相对于背景定位区域的百分比(30% 30%)。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为”auto(自动)”。
cover:此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。背景图不会变形，但是超出区域会被裁减掉。
contain:此时会保持图像的纵横比并将图像缩放成适合背景定位区域的最大大小。
background-position属性的使用：
background-position总共有5个属性，分别是top、right、bottom、left、center，这个5个属性可以单独使用，也可以两两使用。单独使用时，默认第二个参数为center。
背景图片的位置：
属性值： x y
背景图片的位置调整可以使用xpos ypos（都为正值时，往右往下移动）和单词（仅指定一个关键字，其他值将会是”center”）。
百分比：x% y%，第一个值是水平位置，第二个值是垂直位置。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。默认值为：0％0％。
给div设置banner背景，div只设置高度：
正确的做法是，将banner图作为div的背景图，这样的话，背景图超出div的部分，会自动移溢出。需要给div设置的属性如下：
给div设置height（高度为banner图的高度），不需要设置宽度（因为宽度会自动霸占整行）。
背景图片的固定或滚动：
background-attachment属性支持的值以及含义：…
文字效果的实现：
text-shadow凹凸文字效果：…
含有背景图片的文字、渐变色无缝滚动的文字：
background-clip:text背景显示在文字内部，text属性兼容问题：…
混合模式的定义：
background-blend-mode属性定义了背景层的混合模式（图片与颜色）。
可能的值：…
backface-visibility属性的定义：
backface-visibility属性定义当元素不面向屏幕时是否可见。
渐变的使用：
渐变：background-image：…
线性渐变和径向渐变的使用示例：
线性渐变示例图：…
径向渐变示例图：…
重复渐变的使用：…
background简写：
background提供简写用法，即在一个声明中可设置所有的背景属性。
所有属性如下：…
建议顺序：…
背景图片与img标签的对比：
背景图片不占用content内容部分，而img标签会占用。
背景图片大小如果超出盒子是不会显示的，而img标签如果超出父级盒子默认是会超出显示的。
何时使用背景图片，何时使用img标签取决于实际情况，可根据需要选择。
关于background属性，background属性有哪些的介绍到此结束，希望对大家有所帮助。
