重庆SEO, 关注并探索SEO与WEB技术。针对用户体验,提供白帽SEO以及PHP网站建设以及运营服务。 详情

CSS的background简写

发布于 作者 [重庆SEO]

更新于 2017-07-11

Markdown版本

background属性

在CSS2.1里,background属性的简写方式包含五种属性值,从CSS3开始,又增加了3个新的属性值,加起来一共8个。

CSS2.1

background-color 使用的背景颜色。
background-image 使用的背景图像。
background-repeat 如何重复背景图像。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-position 背景图像的位置。

CSS3

background-size 背景图片的尺寸。
background-origin 背景图片的定位区域。
background-clip 背景的绘制区域。

其中,

background-attachment 属性
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时,背景图像不会移动。
inherit 规定应该从父元素继承 background-attachment 属性的设置。
background-size 属性
length

设置背景图像的高度和宽度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为"auto"。

percentage

以父元素的百分比来设置背景图像的宽度和高度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为"auto"。

cover

把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

背景图像的某些部分也许无法显示在背景定位区域中。

contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
background-origin 属性
padding-box 背景图像相对于内边距框来定位。
border-box 背景图像相对于边框盒来定位。
content-box 背景图像相对于内容框来定位。
background-clip 属性
border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。

background简写形式

background: [background-color] 
[background-image] 
[background-repeat] 
[background-attachment] 
[background-position] 
/ 
[ background-size] 
[background-origin] 
[background-clip];

需要注意的是里面的/,它和font以及border-radius里简写方式使用的/用法相似。/可以在支持这种写法的浏览器里在background-position后面接着写background-size。 除此之外,你也可以增加另外两个描述它的属性值: background-origin和 background-clip 示例用法

.example {
  background: aquamarine
  url(img.png)
  no-repeat
  scroll
  center center / 50%
  content-box content-box;
}
分类:Html5

Tags: 简写, background, CSS,

本文标题: CSS的background简写

本文地址: https://seonoco.com/blog/css-background-mini

版权说明: 本站遵循 CC BY-NC-SA 4.0 协议, 未表明转载信息均为原创或整理,转载或引用请注明出处,以便溯本求源。

补充说明: 本文在本站发布于2017-06-27,文中部分内容可能存在过时或不正确,请知晓!如果可以请留言告知。

本文是否有所帮助?
点赞
说一说
打赏