CSS-背景重复 | background-repeat-低调大师

CSS-背景重复 | background-repeat

2018-09-12 707

ground-repeatCSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。

/* 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)的相应的边上, 同时空白会均匀地分布在图像之间. `background-position`属性会被忽视, 除非只有一个图像能被无裁剪地显示. 只在一种情况下裁剪会发生, 那就是图像太大了以至于没有足够的空间来完整显示一个图像.
round	随着允许的空间在尺寸上的增长, 被重复的图像将会伸展(没有空隙), 直到有足够的空间来添加一个图像. 当下一个图像被添加后, 所有的当前的图像会被压缩来腾出空间. 例如, 一个图像原始大小是260px, 重复三次之后, 可能会被伸展到300px, 直到另一个图像被加进来. 这样他们就可能被压缩到225px.
no-repeat	图像不会被重复(因为背景图像所在的区域将可能没有完全被覆盖). 那个没有被重复的背景图像的位置是由`background-position`属性来决定.

正式语法

<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	?	?	?

另见

使用多个背景

微信关注我们

原文链接：https://yq.aliyun.com/articles/638970

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道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...

2018-09-13

663

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: ...

2018-09-13

711

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。