马黑PHP整站系统

认识CSS的background(四)

位置: 首页 > 前端三套件[ 发布时间: 2024.3.11  作者: 马黑  阅读: 237 ]

本节单单讨论 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 属性:


前一篇: 认识CSS的background(三)
下一篇: 认识CSS的background(五)

发表评论:

       

评论列表 [1条]

#1 | 悄然 于 2024-3-12 12:37 发布: repeat有这么多类别,这个太详细了

Copyright © 2023 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com