作者：冰_若真人_755_171 | 来源：互联网 | 2023-05-22 10:33
CSS背景在网页设计中使用频率非常高，然而对于这个开发人员很熟悉的CSS属性，却隐藏着许多不为初级开发人员熟知的细节，这篇文章尝试扒开这层不为人知的面纱。首先列举一下CSS中关于元素背景的所有属
CSS背景在网页设计中使用频率非常高，然而对于这个开发人员很熟悉的CSS属性，却隐藏着许多不为初级开发人员熟知的细节，这篇文章尝试扒开这层不为人知的面纱。
;</code></span><span class=)
}
左图为现代标准浏览器，在IE浏览器中测试，可以将其渲染模式设置为IE6.
;</code></span><span class=)
background-repeat: no-repeat; }
这里换上了一个比div要大的图片，左图为现代标准浏览器的测试结果，右图为IE6中测试结果。
background-position: 50% 50%; }
左图为现代标准浏览器，右图为IE6,可以看到图片被定位到正中间，并在水平和垂直方向重复，这也说明了使用百分比设置定位时是同时作用在元素和背景图片上的，如若不然，图片应该位于黄色方框所在的位置。
;</code></span><span class=)
background-position: 10px 10px; }
background-position: -10px -10px; background-repeat: no-repeat; } ;</code></span><span class=)
background-position: 50% 50%; background-repeat:no-repeat; background-attachment:fixed } style> head> <body> <div> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> div> body> html>;</code></span><span class=)
background-repeat: no-repeat; background-attachment: scroll; overflow: scroll; } style>head><body> <div> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> <p>图像不会随页面的其余部分滚动。p> div> body>html>
在谷歌浏览器中测试结果如下
;</code></span><span class=)
background-origin: border-box; background-position: 10px 10px; background-repeat: no-repeat; }
;</code></span><span class=)
background-clip: content-box; }
;</code></span><span class=)
background-clip: content-box; background-size: cover; }
设置background-size为cover后，图片拉伸覆盖了整个背景区域（例子中的背景区域是使用background-clip属性限制在内容区域的）,如果设置background-size为contain,效果如上右图。图片保持宽高比例伸缩，这里首先是图片下边缘碰到了背景区域下边缘，此时图片背景右边还没有碰到背景区域的右边缘，由于例子中background-repeat默认为repeat，所以继续在水平方向重复直到碰到背景区域的右边缘。
总结：CSS中关于背景的属性不是很多，但其中的细节却 值得每位前端开发人员弄清楚。幸亏弄了一张美女图，不然肯定是不能坚持写完了。
来自为知笔记(Wiz)
![[译]技术公司十年经验的职场生涯回顾](https://img8.php1.cn/3cdc5/24912/711/b6574f3292f9dc00.png)
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有