CSS-背景重复 | background-repeat
ground-repeat
CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴,垂直轴,两个轴重复,或者根本不重复。
/* One-value syntax */ background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: repeat; background-repeat: space; background-repeat: round; background-repeat: no-repeat; /* Two-value syntax: horizontal | vertical */ background-repeat: repeat space; background-repeat: repeat repeat; background-repeat: round space; background-repeat: no-repeat round; /* Global values */ background-repeat: inherit; background-repeat: initial; background-repeat: unset;
默认情况下,重复的图像被裁剪为元素的大小,但可以缩放以适合(使用round
)或者从头到尾均匀分布(使用space
)。
初始值 | repeat |
---|---|
适用元素 | all elements. It also applies to ::first-letter and ::first-line. |
是否是继承属性 | no |
适用媒体 | visual |
计算值 | a list, each item consisting of two keywords, one per dimension |
Animation type | discrete |
正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
值
<repeat-style>
单值语法是完整的双值语法的缩写:
单值 | 等价于双值 |
---|---|
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 | 图像不会被重复(因为背景图像所在的区域将可能没有完全被覆盖). 那个没有被重复的背景图像的位置是由 |
正式语法
<repeat-style>#where <repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}
示例
HTML
<ol> <li>no-repeat <div class="one"></div> </li> <li>repeat <div class="two"></div> </li> <li>repeat-x <div class="three"></div> </li> <li>repeat-y <div class="four"></div> </li> <li>space <div class="five"></div> </li> <li>round <div class="six"></div> </li> <li>repeat-x, repeat-y (multiple images) <div class="seven"></div> </li> </ol>
CSS
/* Shared for all DIVS in example */ ol, li { margin: 0; padding: 0; } li { margin-bottom: 12px; } div { background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif); width: 160px; height: 70px; } /* Background repeats */ .one { background-repeat: no-repeat; } .two { background-repeat: repeat; } .three { background-repeat: repeat-x; } .four { background-repeat: repeat-y; } .five { background-repeat: space; } .six { background-repeat: round; } /* Multiple images */ .seven { background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif), url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png); background-repeat: repeat-x, repeat-y; height: 144px; }
结果
在这个例子中, 每一个列表项都使用了不同的background-repeat语法.
规范
Specification | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3The definition of 'background-repeat' in that specification. | Candidate Recommendation | Adds support for multiple background images, the two-value syntax allowing distinct repetition behavior for the horizontal and vertical directions, the space and round keywords, and for backgrounds on inline-level elements by precisely defining the background painting area. |
CSS Level 2 (Revision 1)The definition of 'background-repeat' in that specification. | Recommendation | No significant changes. |
CSS Level 1The definition of 'background-repeat' in that specification. | Recommendation | Initial definition. |
浏览器兼容性
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic Support | 1.0 | 12 | 1.0 | 4 | 3.5 | 1.0 |
Multiple backgrounds | 1.0 | 12 | 3.6 | 9 | 10.5 | 1.3 |
Two-value syntax (different values for x & y directions) | (Yes) | 12 | 13.0 | 9.0 | (Yes) | (Yes) |
round and space keywords | (Yes) | 12 | 49.0 | 9.0 | 10.5 | (Yes) |
Feature | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic Support | ? | ? | (Yes) | 1.0 | ? | ? | ? |
Multiple backgrounds | ? | ? | (Yes) | (Yes) | ? | ? | ? |
Two-value syntax (different values for x & y directions) | ? | ? | (Yes) | 13.0 | ? | ? | ? |
round and space keywords | ? | ? | (Yes) | 49.0 | ? | ? | ? |
另见
- 使用多个背景
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
安卓面试中高级安卓开发面试之——2018秋招各大公司招聘细节披露
各大企业秋招流程: 杭州/阿里/数据技术及产品部:2轮技术面+交叉面+hr面深圳/腾讯/OMG/腾讯视频:2轮技术面+hr面北京/百度/百度APP研发部:3轮技术面+文化测评北京/爱奇艺:3轮技术面深圳/vivo:1轮技术面+hr面+线下交流会北京/一点资讯:3轮技术面+hr面 北京/360:2-3轮技术面+2轮HR面(一般第一轮的笔试现在已经略过了,不用笔试了) 常见面试题: Android: Activity Q :说下Activity的生命周期? Q :onStart()和onResume()/onPause()和onStop()的区别? Q :Activity A启动另一个Activity B会回调哪些方法?如果Activity B是完全透明呢?如果启动的是一个Dialog呢? Q :谈谈onSaveInstanceState()方法?何时会调用? Q :onSaveInstanceState()与onPause()的区别? Q :如何避免配置改变时Activity重建? Q :优先级低的Activity在内存不足被回收后怎样做可以恢复到销毁前状态? Q :说下Activity...
- 下一篇
CSS-背景大小 | background-size
background-sizeCSS属性指定一个元素的背景图像的大小。图像可以保留其自然大小,拉伸到一个新的大小,或约束,以适应可用空间,同时保持其固有的比例。 /* Keyword values */ background-size: cover; background-size: contain; /* One-value syntax */ /* the width of the image (height becomes 'auto') */ background-size: 50%; background-size: 3.2em; background-size: 12px; background-size: auto; /* Two-value syntax */ /* first value: width of the image, second value: height */ background-size: 50% auto; background-size: 3em 25%; background-size: auto 6px; background-size: ...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- 设置Eclipse缩进为4个空格,增强代码规范
- CentOS8安装Docker,最新的服务器搭配容器使用
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS8编译安装MySQL8.0.19
- SpringBoot2整合Redis,开启缓存,提高访问速度
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- Hadoop3单机部署,实现最简伪集群
- CentOS7,CentOS8安装Elasticsearch6.8.6