CSS background-color 、image 背景图片
2016-11-28 14:24
204 查看
背景颜色 background-color
语法:
background-color:<color>默认值:transparent 透明
适用于:所有元素
继承性:无
动画性:是
计算值:指定值
取值:
<color>: 指定颜色。说明:
设置或检索对象的背景颜色。当同时定义了背景颜色和背景图像时,背景图像覆盖在背景颜色之上。
如果设置了 <' background-image '>,同时也建议设置 <' background-color '> 用于当背景图像不可见时保持与文本颜色有一定的对比度。
对应的脚本特性为backgroundColor。
背景图片 background-image
语法:
background-image:<bg-image> [ , <bg-image> ]*<bg-image> = <image> | none
默认值:none
适用于:所有元素
继承性:无
动画性:否
计算值:指定值
取值:
none: 无背景图。 <image>: 使用绝对或相对地址指或者创建渐变色来确定图像。说明:
设置或检索对象的背景图像。如果设置了 <' background-image '>,同时也建议设置 <' background-color '> 用于当背景图像不可见时保持与文本颜色有一定的对比度。
如果定义了多组背景图,且背景图之间有重叠,写在前面的将会盖在写在后面的图像之上。
对应的脚本特性为backgroundImage。
background-image : url(“http://static.criteo.net/flash/icon/nai_small.png”); // 全URL路径
background-image : url(“/flash/icon/nai_small.png”); // 根路径
background-image : url(“../nai_small.png”) ; // 相对于css文件的路径
background-image : url(../nai_small.png) ; //不写引号
background-image : url(‘../nai_small.png’) ; // 单引号
背景重复 background-repeat
语法:
background-repeat:<repeat-style> [ , <repeat-style> ]*<repeat-style> = repeat-x | repeat-y | [repeat | no-repeat | space | round]{1,2}
默认值:repeat
适用于:所有元素
继承性:无
动画性:否
计算值:指定值
取值:
repeat-x:背景图像在横向上平铺 repeat-y: 背景图像在纵向上平铺 repeat: 背景图像在横向和纵向平铺 no-repeat: 背景图像不平铺 round: 背景图像自动缩放直到适应且填充满整个容器。(CSS3) space: 背景图像以相同的间距平铺且填充满整个容器或某个方向。(CSS3)说明:
设置或检索对象的背景图像如何铺排填充。必须先指定 <' background-image '> 属性。允许提供2个参数,如果提供全部2个参数,第1个用于横向,第二个用于纵向。
如果只提供1个参数,则用于横向和纵向。特殊值repeat-x和repeat-y除外,因为repeat-x相当于repeat no-repeat,repeat-y相当于no-repeat repeat,即其实repeat-x和repeat-y等价于提供了2个参数值
对应的脚本特性为backgroundRepeat。
背景跟着内容滚动 background-attachment
语法:
background-attachment:<attachment> [ , <attachment> ]*<attachment> = fixed | scroll | local
默认值:scroll
适用于:所有元素
继承性:无
动画性:否
计算值:指定值
取值:
fixed: 背景图像相对于窗体固定。 scroll: 背景图像相对于元素固定,也就是说当元素内容滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。 local: 背景图像相对于元素内容固定,也就是说当元素随元素滚动时背景图像也会跟着滚动,因为背景图像总是要跟着内容。(CSS3)说明:
设置或检索背景图像是随对象内容滚动还是固定的。必须先指定 <' background-image '> 属性。对应的脚本特性为backgroundAttachment。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>background-attachment 背景跟着内容动</title> <style type="text/css"> .parent{ height: 2000px; } .sample{ overflow: scroll; font-size: 22px; margin: 200px; width: 230px; height: 200px; border: 2px solid black; background-image: url(red.png); background-attachment: local; } </style> </head> <body> <div class="parent"> <div class="sample"> Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World </div> </div> </body> </html>
相关文章推荐
- iOS用图片设置背景颜色colorWithPatternImage
- uiscrollview UIView 设置背景图片 swift 不用colorWithPatternImage
- CSS background-image背景图片相关介绍
- CSS background-image背景图片相关介绍
- 解决 UIView 设置背景为UIImage图片变型问题[XXX setBackgroundColor:[UIColor colorWithPatternImage:XXX]];
- 关于 QWidget无法使用stylesheet设置自身backgound-color(背景色)和border-image(背景图片) 的解决方法
- CSS background属性在IE6下无法显示背景图片
- UGUI 如何代码更改image的背景图片、颜色以及材质
- ImageView设置背景图片后置灰探究
- Swift中tableViewCelll和ImageView中图片背景显示的问题
- Android中的ImageView的getDrawableCache获取背景图片的时候注意的问题
- Android布局自定义Shap圆形ImageView,可以单独设置背景与图片
- list-style-image图片背景与文字对齐准则
- imageView背景图片拉抻
- php imagecreatetruecolor 创建高清和透明图片代码小结
- UIColor colorWithPatternImage代码片段(背景平铺)
- android 实现ImageView按压效果和解决背景图片拉申问题
- Firefox BUG:页面太大的时候background-image背景图片渲染出错
- css对textbox加背景图片与color
- imageview 设置背景图片解析