百科狗background-repeat - 背景图像填充方式 - css 背景颜色
background-repeat
background-repeat CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。
示例
background-repeat: repeat-x; background-repeat: repeat; background-repeat: space; background-repeat: round; background-repeat: no-repeat; background-repeat: space repeat;
浏览器支持
浏览器都支持background-repeat |
语法：
background-repeat：repeat-x | repeat-y |[repeat | no-repeat | space | round]取值：
- repeat-x：背景图像在横向上平铺
- repeat-y：背景图像在纵向上平铺
- repeat：背景图像在横向和纵向平铺
- no-repeat：背景图像不平铺
- round：背景图像自动缩放直到适应且填充满整个容器。（CSS3）
- space：背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3）
说明：
设置或检索对象的背景图像如何铺排填充。必须先指定属性。
- 允许提供2个参数，如果提供全部2个参数，第1个用于横向，第二个用于纵向。
- 如果只提供1个参数，则用于横向和纵向。特殊值repeat-x和repeat-y除外，因为repeat-x相当于repeatno-repeat，repeat-y相当于no-repeatrepeat，即其实repeat-x和repeat-y等价于提供了2个参数值
- 对应的脚本特性为backgroundRepeat。
| 默认值 | repeat |
| 适用于 | 所有元素 |
| 继承性 | 无 |
| 动画性 | 否 |
| 计算值 | 指定值 |
取值
| 单值 | 等价于双值 |
repeat-x | repeat no-repeat |
repeat-y | no-repeat repeat |
repeat | repeat repeat |
space | space space |
round | round round |
no-repeat | no-repeat no-repeat |
repeat | 图像会按需重复来覆盖整个背景图片所在的区域。最后一个图像会被裁剪，如果它的大小不合适的话. |
space |
图像会尽可能得重复，但是不会裁剪。第一个和最后一个图像会被固定在元素(element)的相应的边上，同时空白会均匀地分布在图像之间. |
round | 随着允许的空间在尺寸上的增长，被重复的图像将会伸展(没有空隙),直到有足够的空间来添加一个图像。当下一个图像被添加后，所有的当前的图像会被压缩来腾出空间。例如，一个图像原始大小是260px,重复三次之后，可能会被伸展到300px,直到另一个图像被加进来。这样他们就可能被压缩到225px. 译者注：关键是浏览器怎么计算什么时候应该添加一个图像进来，而不是继续伸展. |
no-repeat | 图像不会被重复(因为背景图像所在的区域将可能没有完全被覆盖).那个没有被重复的背景图像的位置是由 |
p{width:200px;
height:100px;
background-image:url("images/bird.png");
background-repeat:no-repeat;
}
div{
width:200px;
height:150px;
background-image:url("images/bird.png");
background-repeat:repeat-y;
} 图片不重复:
图片沿y轴重复:
效果图：
鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com
免责声明：我们致力于保护作者版权，注重分享，当前被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!邮箱：344225443@qq.com)
图片声明：本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!
内容声明：本文中引用的各种信息及资料（包括但不限于文字、数据、图表及超链接等）均来源于该信息及资料的相关主体（包括但不限于公司、媒体、协会等机构）的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理！本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)
相关文章
