13518219792
这篇文章主要讲解了“CSS的background汇总”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS的background汇总”吧！
创新互联公司成立于2013年，是专业互联网技术服务公司，拥有项目网站制作、成都做网站网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元甘泉做网站,已为上家服务,为甘泉各地企业和个人服务,联系电话:18980820575
所有背景属性都不能继承。
1. background-color
所有元素都能设置背景颜色。
background-color的默认值是transparent；也就是说，如果一个元素没有指定背景颜色，那么背景就是透明的，这样其祖先元素的背景才能可见。
2. background-image
所有元素都能设置背景图像；
背景图像可以设置多个，中间用逗号隔开；背景图像会层叠，写在前面的层次在上面。
3. background-repeat
repeat（默认）/no-repeat/repeat-x/ repeat-y
4. background-attachment
scroll（默认）/fixed
5. background-position
像素法：以图像左上角为起点，第一个值为水平移动的距离，第二个值为垂直移动的距离；若只规定一个值，第二个值默认为50%。
百分比法：百分比同时应用于图像和元素，相应的点重合进行定位。如果只指定一个百分数，意味着垂直方向为50%。
关键字法：top、right、bottom、left、center进行组合定位；若只规定一个值，第二个值默认为center。
注意：background-position可以为负值。
在默认情况下，背景颜色延伸到边框下面，背景图像在padding区域的左上角。
6. background-size
设置背景图像的尺寸；默认值为auto。
像素法：第一个值设置宽度，第二个值设置高度；若只有一个值，第二个值为auto。
百分比法：以父元素的宽度和高度以基准来计算。
关键字cover，不改变图像宽高比例，在水平和垂直方向都铺满整个元素，有可能导致一部分图像溢出。
关键字contain，不改变图像宽高比例，尽可能拉伸，直到某一方向铺满整个元素，有可能导致另一方向没有铺满。
7. background-origin
定义背景图像的初始位置
border-box，边框左上角。
padding-box，padding区域左上角；默认值。
content-box，内容区左上角。
8. background-clip
The CSS3 background-clip property specifies the painting area of the background.
The property takes three different values:
•border-box - (default) the background is painted to the outside edge of the border
•padding-box - the background is painted to the outside edge of the padding
•content-box - the background is painted within the content box
（英文的解释得比较清楚）
（英文都是从W3Schools Online搬运）
关于background-origin和background-clip，它们是相互独立的，互不干扰。
关于background的CSS写法，个人认为应该逻辑明确、层次分明；具体而言：
background定义背景图像，background-color定义背景颜色，background-clip定义背景显示区域。
（个人见解，仅供参考）
Full Size Background Image
If we want to have a background image on a website that covers the entire browser window at all times.
The requirements are as follows:
• Fill the entire page with the image (no white space)
• Scale image as needed
• Center image on page
• Do not cause scrollbars
The following example shows how to do it; Use the html element (the html element is always at least the height of the browser window). Then set a fixed and centered background on it. Then adjust its size with the background-size property:
CSS Code复制内容到剪贴板
html {
background: url(img_flower.jpg) no-repeat center fixed;
background-size: cover;
}
小tips：
利用背景图像的水平平铺，实现波浪式的边框效果。
感谢各位的阅读，以上就是“CSS的background汇总”的内容了，经过本文的学习后，相信大家对CSS的background汇总这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！
