请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
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 属性:
| 
发表于 2024-3-11 18:33
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-3-12 18:05
白酒来一杯吧