CSS background 属性
2016-05-29 21:18
465 查看
CSS background 属性
如下图一个例子:
定义和用法
background 简写属性在一个声明中设置所有的背景属性。可以设置如下属性:
background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image
如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif'); 也是允许的。
可能的值
值 | 描述 | CSS |
---|---|---|
background-color | 规定要使用的背景颜色。 | 1 |
background-position | 规定背景图像的位置。 | 1 |
background-size | 规定背景图片的尺寸。 | 3 |
background-repeat | 规定如何重复背景图像。 | 1 |
background-origin | 规定背景图片的定位区域。 | 3 |
background-clip | 规定背景的绘制区域。 | 3 |
background-attachment | 规定背景图像是否固定或者随着页面的其余部分滚动。 | 1 |
background-image | 规定要使用的背景图像。 | 1 |
inherit | 规定应该从父元素继承 background 属性的设置。 | 1 |
CSS background-color 属性
可能的值
值 | 描述 |
---|---|
color_name | 规定颜色值为颜色名称的背景颜色(比如 red)。 |
hex_number | 规定颜色值为十六进制值的背景颜色(比如 #ff0000)。 |
rgb_number | 规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))。 |
transparent | 默认。背景颜色为透明。 |
inherit | 规定应该从父元素继承 background-color 属性的设置。 |
CSS background-position 属性
可能的值
值 | 描述 |
---|---|
top left top center top right center left center center center right bottom left bottom center bottom right | 如果您仅规定了一个关键词,那么第二个值将是"center"。 默认值:0% 0%。 |
x% y% | 第一个值是水平位置,第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值,另一个值将是 50%。 |
xpos ypos | 第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值,另一个值将是50%。 您可以混合使用 % 和 position 值。 |
CSS3 background-size 属性
语法
background-size: length|percentage|cover|contain;
值 | 描述 | 测试 |
---|---|---|
length | 设置背景图像的高度和宽度。 第一个值设置宽度,第二个值设置高度。 如果只设置一个值,则第二个值会被设置为 "auto"。 | 测试 |
percentage | 以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度,第二个值设置高度。 如果只设置一个值,则第二个值会被设置为 "auto"。 | 测试 |
cover | 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。 | 测试 |
contain | 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 | 测试 |
CSS background-repeat 属性
可能的值
值 | 描述 |
---|---|
repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
repeat-x | 背景图像将在水平方向重复。 |
repeat-y | 背景图像将在垂直方向重复。 |
no-repeat | 背景图像将仅显示一次。 |
inherit | 规定应该从父元素继承 background-repeat 属性的设置。 |
CSS3 background-origin 属性
语法
background-origin: padding-box|border-box|content-box;
值 | 描述 | 测试 |
---|---|---|
padding-box | 背景图像相对于内边距框来定位。 | 测试 |
border-box | 背景图像相对于边框盒来定位。 | 测试 |
content-box | 背景图像相对于内容框来定位。 | 测试 |
CSS3 background-clip 属性
语法
background-clip: border-box|padding-box|content-box;
值 | 描述 | 测试 |
---|---|---|
border-box | 背景被裁剪到边框盒。 | 测试 |
padding-box | 背景被裁剪到内边距框。 | 测试 |
content-box | 背景被裁剪到内容框。 | 测试 |
CSS background-attachment 属性
可能的值
值 | 描述 |
---|---|
scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
fixed | 当页面的其余部分滚动时,背景图像不会移动。 |
inherit | 规定应该从父元素继承 background-attachment 属性的设置。 |
CSS background-image 属性
可能的值
值 | 描述 |
---|---|
url('URL') | 指向图像的路径。 |
none | 默认值。不显示背景图像。 |
inherit | 规定应该从父元素继承 background-image 属性的设置。 |
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。
在不同浏览器的用法不同之处就是前面的前缀不一样。
线性渐变在 Webkit 下的应用
语法:
函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色。如图所示:
我们先来看一个老式的写法示例:
接着我们在来看一下新式的写法:
起始点(Starting Point)的工作方式类似于 background position。您可以设置水平和垂直位置为百分比,或以像素为单位,或在水平方向上可以使用left/center/right,在垂直方向上可以使用top/center/bottom。位置起始于左上角。如果你不指定水平或垂直位置,它将默认为center。其工作方式主要包含:Top → Bottom、Left → Right、bottom → top、right → left等,接着我们主要一种一种来看其实现的效果:
1、开始于center(水平方向)和top(垂直方向)也就是Top → Bottom:
2、始于left(水平方向)和center(垂直方向)也是就Left → Right:
3、起始于left(水平方向)和top(垂直方向):
4、Linear Gradient (with Even Stops):
5、with Specified Arbitrary Stops:
6、角度(Angle):
正如上面看到的示例,如果您不指定一个角度,它会根据起始位置自动定义。如果你想更多的控制渐变的方向,您不妨设置角度试试。例如,下面的两个渐变具有相同的起点left center,但是加上一个30度的角度。
没有角度的示例代码:
当指定的角度,请记住,它是一个由水平线与渐变线产生的的角度,逆时针方向。因此,使用0deg将产生一个左到右横向梯度,而90度将创建一个从底部到顶部的垂直渐变。我来看看你核心代码:
除了起始位置和角度,你应该指定起止颜色。起止颜色是沿着渐变线,将会在指定位置(以百分比或长度设定)含有指定颜色的点。色彩的起止数是无限的。如果您使用一个百分比位置,0%代表起点和100%是终点,但区域外的值可以被用来达到预期的效果。 这也是通过CSS3 Gradient制作渐变的一个关键所在,其直接影响了你的设计效果,像我们这里的示例都不是完美的效果,只是为了能给大家展示一个渐变的效果,大家就这样先用着吧。我们接着看一下不同的起址色的示例:
如果没有指定位置,颜色会均匀分布。如下面的示例:
7、渐变上应用透明度(Transparency):
透明渐变对于制作一些特殊的效果是相当有用的,例如,当堆叠多个背景时。这里是两个背景的结合:一张图片,一个白色到透明的线性渐变。我们来看一个官网的示例吧:
本文转自:http://www.w3school.com.cn/cssref/pr_background.asp
http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html
相关文章推荐
- CSS浏览器适配设置
- 【css】选择器+盒子模型
- html/css
- css
- 纯css3 开关按钮
- CSS3 Transition
- [译]CSS-理解百分比的background-position
- 浏览器兼容的css hack
- JS对父元素和子元素样式设置及Iframe子页面装载
- CSS实现div垂直居中 div上下居中显示
- CSS box-flex属性
- CSS盒子模型的定位
- 有关CSS的一些事
- css3 -- 过渡与动画
- div验证样式
- css3 -- 2D变换
- css3 -- 渐变
- SecureCRT如何修改字体样式和大小
- css hack
- 利用 filter 机制给静态资源 url 加上时间戳,来防止js和css文件的缓存问题