请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 马黑黑 于 2024-3-11 18:34 编辑
本节单单讨论 background-repeat 属性。上一讲简单介绍了 background-repeat 属性,它用来定义背景图像是否重复、如何重复,这里再详细介绍它的属性值及其含义等。请看:
background-repeat: repeat; /* xy方向都重复(缺省、默认值) */
background-repeat: repeat-x; /* x方向都重复,y方向不重复 */
background-repeat: repeat-y; /* y方向都重复,x方向不重复 */
background-repeat: no-peat; /* xy方向都不重复 */
/* ↓
能重复时头尾两个图像固定在元素的四个边,中间均匀分布
图像尺寸大于等于元素尺寸时此设置无效,大于时图片被剪裁
*/
background-repeat: space; /* 等同于 space space,xy均这样设置 */
/* ↓
图像会根据允许的空间进行伸缩,图形会变形
怪异属性值,不同浏览器对 round 的解析行为可能不一致
*/
background-repeat: round; /* 等同于 round round,xy均这样设置 */
以上是 background-repeat 简写属性赋值举例和说明,共六个属性值。另外还有:一个继承属性值(inherit),表示继承父级元素的设置,一个取消设置(unset)属性值,一个初始设置值(initial),后两者均用于JS动态交互。针对六个属性值,我们需要注意的是,任意一个方向的图像重复设置,以及 round 属性值设置,都会从 background-position 设置或默认设置的位置开始复制,最后复制到与复制出发点相衔接(图像的右对左、下对上,但左右和上下两边的图像可能不能拼凑成完整图像,大家可以在后面的演示中观察感受);space 属性值则会令 background-position 的设置失效,图像重复总是从最上边、最左边开始。
最后给出一个演示示例,示例的初始设置是背景图像定位在元素的左上角,background-position 设置为 10px 10px,可以通过点击各个按钮逐一查看不同的 background-repeat 设置是什么样的效果:
设置 background-repeat 属性:
|