大家好ヽ( o・ェ・)ノ。随便写写哈。
background-color 属性
首先从最简单的开始,设置背景的颜色值。
初始值: transparent
是否继承属性: 否
关于继承可能有同学不是很懂,这里附注简单理解一下:
我们都知道html标签都是层层嵌套的,我给外层设置了属性,而内层也被应用了这个属性,那么这个属性就是继承的。
继承是一种规则,它允许样式不仅应用于特定的html标签元素,而且应用于其后代元素。
属性值
- transparent:默认值。指定背景颜色应该是透明的。其实这个属性大部分情况下并不会使用。
- color:指定背景颜色。
- 预定义的颜色名称: 规定颜色值为颜色名称的颜色(比如 red)。
- 十六进制颜色:规定颜色值为十六进制值的颜色(比如 #ff0000)。
- RGB颜色: 规定颜色值为 rgb 代码的颜色(比如 rgb(255,0,0))。
- RGBA颜色:RGBA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+支持。RGBA颜色值是RGB颜色值alpha通道的延伸 - 指定对象的透明度。RGBA(红,绿,蓝,alpha)。Alpha参数是一个介于0.0(完全透明)和1.0(完全不透明)之间的参数。
- HSL颜色:IE9, Firefox, Chrome, Safari,和Opera 10+.支持HSL颜色值。HSL(色调,饱和度,明度)。(比如hsl(120,65%,75%))。
- HSLA颜色:HSLA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+支持。HSLA的颜色值是一个带有alpha通道的HSL颜色值的延伸 - 指定对象的透明度。HSLA(色调,饱和度,亮度,alpha)。
- 特殊的关键字。很有趣的关键字currentColor。(๑→ܫ←)
- currentColor:css3的属性。可以替换使用到颜色值的地方,意思是当前颜色,确切的说是当前的标签所继承的文字颜色。currentColor = color的值。
- 继承。同样使用的不多,但是合理的运用继承又能使CSS 代码更加符合 DRY(Don't Repeat Yourself 避免重复代码)原则。
- inherit:继承。规定背景颜色从父元素继承。
- initial:IE 不支持该关键字。默认。
- unset:不设置。如果该属性是默认继承属性,该值等同于 inherit,如果该属性是非继承属性,该值等同于 initial。background-color 为非继承属性,所以现在相当于 initial。
使用示例
background-color: red; /* Keyword */
background-color: #bbff00; /* Hexadecimal */
background-color: rgb(255, 255, 128); /* RGB */
background-color: hsla(50, 33%, 25%, 0.75); /* HSLA */
background-color: transparent; /* Special keyword */
background-color: inherit; /* Global values */
background-color: initial; /* Global values */
background-color: unset; /* Global values */
background-color: currentColor; /* Special keyword */
指定颜色值
currentColor的使用
background-image 属性
设置一个元素的背景图像,可以设置一个或者多个背景图像。但是注意,如果一个指定的图像无法被绘制 (比如,被指定的 URI 所表示的文件无法被加载),浏览器会将此情况等同于其值被设为 none。
默认情况下,background-image放置在元素的左上角,并重复垂直和水平方向。
初始值: none
是否继承属性: 否
属性值
每个背景图像被明确规定为关键字 none
或是一个
值。
- none:默认值。不显示背景图像。
-
值 :url('URL')。指向图像的路径。 - 继承:见
background-color
属性,这里不重复介绍。 - 渐变属性:CSS3的属性。
- linear-gradient() 函数:创建一个线性渐变的 "图像"(从上到下)。(例如 linear-gradient(red, yellow, blue)。从头部开始的线性渐变,从红色开始,转为黄色,再到蓝色。)
- radial-gradient() 函数:用径向渐变创建 "图像"。
- ** repeating-linear-gradient() 函数**:重复的线性渐变 "图像"。
- ** repeating-radial-gradient() 函数**:重复的径向渐变 "图像"。
使用示例
/* 单个背景图 */
background-image: url("../../media/examples/aaa.png");
/* 多个背景图 */
background-image: url("../../media/examples/lizard.png"),
url("../../media/examples/star.png");
/* 渐变色*/
background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),
url("../../media/examples/lizard.png");
背景图设置
background-repeat 属性
定义背景图像的重复方式。背景图像可以沿着水平轴,垂直轴,两个轴重复,或者根本不重复。
默认情况下,重复的图像被剪裁为元素的大小,但它们可以缩放 (使用 round) 或者均匀地分布 (使用 space)。
初始值: repeat
是否继承属性: 否
属性值
- repeat:默认值,背景图像将向垂直和水平方向重复。
- repeat-x:只有水平位置会重复背景图像。
- repeat-y:只有垂直位置会重复背景图像。
- no-repeat:background-image不会重复。
- space:背景图不会缩放,会被裁切。
- round:缩放背景图至容器大小。
- 继承:见
background-color
属性,这里不重复介绍。
使用示例
/* 单值语法 */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: no-repeat;
background-repeat: space;
background-repeat: round;
/* 双值语法:水平horizontal | 垂直vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;
/* 继承*/
background-repeat: inherit;
背景图像的重复方式
background-position 属性
为每一个背景图片设置初始位置。
这个位置是相对于由 background-origin(css3的属性) 定义的位置图层的。
初始值: 0% 0%
是否继承属性: 否
属性值
-
值 :定义一组 x/y 坐标(相对于一个元素盒子模型的边缘),来放置这个item。它可以被定义为一个值或者两个值,水平和垂直的位置。如果仅指定一个值,其他值将会是 center 。- top, left, bottom, right。用来指定把这个item 放在哪一个边缘。
- 关键字 center,用来居中背景图片。
- length(px),percentage(百分比)。指定相对于左边缘的 x 坐标,y 坐标的位置。
- 继承:见
background-color
属性,这里不重复介绍。
百分比值的偏移指定图片的相对位置和容器的相对位置重合。值0%代表图片的左边界(或上边界)和容器的左边界(上边界)重合。值100%代表图片的右边界(或下边界)和容器的右边界(或下边界)重合。值50%则代表图片的中点和容器的中点重合。
使用示例
/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
/* values */
background-position: 25% 75%;
/* values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;
background-position: 10px 8px;
/* Edge offsets values */
background-position: bottom 10px right 20px;
/* Multiple images */
background-position: 0 0, center;
/* Global values */
background-position: inherit;
背景图片设置初始位置
background-attachment 属性
设置背景图像是否固定或者随着页面的其余部分滚动。
初始值: scroll
是否继承属性: 否
属性值
- scroll:默认值。背景图片随着页面的滚动而滚动。
- fixed:此关键属性值表示背景相对于视口固定。背景图片不会随着页面的滚动而滚动。
- local:此关键属性值表示背景相对于元素的内容固定。背景图片会随着元素内容的滚动而滚动。
- 继承:见
background-color
属性,这里不重复介绍。
使用示例
background-attachment: fixed;
background-attachment: scroll;
background-attachment: local;
background-attachment: local, scroll;
背景图像是否固定
background 属性
背景缩写属性可以在一个声明中设置所有的背景属性。
可以设置的属性分别是:background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment 和 background-image。
各值之间用空格分隔,不分先后顺序。
是否继承属性: 否
使用示例
background: green;
background: no-repeat url("aaa.png");
background: #00ff00 url('aaa.gif') no-repeat fixed center;
背景缩写属性
总结
结束语
来呀,快活呀,反正有大把时光~