请选择 进入手机版 | 继续访问电脑版
贠老师培训群:150322713    贠老师QQ:767708506

贠老师office培训-excel学习网

 找回密码
 立即注册
点击咨询贠老师
查看: 252|回复: 11

CSS的背景图像属性background

[复制链接]

607

主题

604

帖子

1909

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1909
发表于 2016-1-27 22:38:00 | 显示全部楼层 |阅读模式

CSS的背景属性“background”提供了众多属性值,如颜色、图像、定位等,为网页背景图像的定义提供了极大的便利。看看background提供的属性值:

background : background-color   background-image   background-repeat   background-attachment   background-position

从属性值的名字就可以很明白的看出来,分别是:颜色、图像、铺排、滚动、定位,其中background-repeat、background-position必须是在指定了background-image属性值后才有效。

background-color:transparent   color 。“transparent”是background-color的默认属性值(红色字表示默认值),意为背景色透明,也就是无背景色;而“color”则指的是颜色了,可以是HTML语言支持英文单词,也可以是十六进制的颜色值,当然推荐还是使用十六进制的颜色值来表示,比如黑色使用“#000”。

background-image:none   url 。默认属性值是无背景图,需要使用背景图时可用url进行导入。

background-repeat:repeat   no-repeat   repeat-x   repeat-y 。默认属性值是背景图像在纵向和横向上平铺,如果不希望图像平铺而是以一个完整的衬图来显示的时候则使用“no-repeat”,相同的道理在横向上平铺则是使用”repeat-x”纵向上平铺则使用”repeat-y”。

background-attachment:scroll   fixed 。“scroll”是背景图像随对像内容滚动,“fixed”则是背景图像固定。

background-position:position(length)   position(length) 。对象的背景图像位置有两种方式可选择,一种是使用position(top   center   bottom   left   center   right)来定位背景图像位置,而另一种方式则是使用lefgth(数值)来定位,使用数值需要注意的是,当只有一个数值时,这个值将用于横坐标,纵坐标将默认是50%,如果有两个数值时,则分别是横坐标、纵坐标。

了解并熟悉了以上background属性及属性值之后,很容易的就可以对网页的背景图像做出合适的处理。但是在这里有一个小技巧,那就是在定义了background-image属性之后,应该定义一个与背景图像颜色相近的background-color值,这样在网速缓慢背景图像未加载完成或是背景图像丢失之后,仍然可以提供很好的文字可识别性。比如背景图像是一张黑色的底图,那么文字的颜色自然而然会选择浅色调的甚至白色,如果此时背景图像未加载完成或者图像丢失,那么就需要定义一个黑色的背景颜色,才可以保持文字的可识别性。


回复

使用道具 举报

0

主题

896

帖子

61

积分

注册会员

Rank: 2

积分
61
发表于 2016-3-10 11:32:28 | 显示全部楼层
太给力啊 跪谢啊
回复 支持 反对

使用道具 举报

1

主题

345

帖子

364

积分

中级会员

Rank: 3Rank: 3

积分
364
QQ
发表于 2016-3-11 22:41:48 | 显示全部楼层
还有许多问题不明白,有点恼火啊!
回复 支持 反对

使用道具 举报

1

主题

886

帖子

5

积分

注册会员

Rank: 2

积分
5
发表于 2016-3-25 09:28:12 | 显示全部楼层
顶一个
回复 支持 反对

使用道具 举报

0

主题

633

帖子

102

积分

注册会员

Rank: 2

积分
102
发表于 2016-3-25 21:41:02 | 显示全部楼层
赞一个
回复 支持 反对

使用道具 举报

2

主题

920

帖子

87

积分

注册会员

Rank: 2

积分
87
发表于 2016-7-1 11:12:25 | 显示全部楼层
学习贵在坚持哦
回复 支持 反对

使用道具 举报

1

主题

851

帖子

7

积分

注册会员

Rank: 2

积分
7
发表于 2016-7-16 13:50:42 | 显示全部楼层
不错,学习了
回复 支持 反对

使用道具 举报

3

主题

986

帖子

67

积分

注册会员

Rank: 2

积分
67
发表于 2016-10-17 09:47:38 | 显示全部楼层
顶一个
回复 支持 反对

使用道具 举报

1

主题

886

帖子

5

积分

注册会员

Rank: 2

积分
5
发表于 2018-1-8 13:23:46 | 显示全部楼层
楼主是好人哪,感谢分享,太棒了!
回复 支持 反对

使用道具 举报

0

主题

633

帖子

102

积分

注册会员

Rank: 2

积分
102
发表于 2018-9-8 16:32:32 | 显示全部楼层
我是路过的,轻轻飘过
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



陕ICP备15003731号  

贠老师培训 GMT+8, 2018-11-21 02:03 , Processed in 0.224021 second(s), 32 queries .

快速回复 返回顶部 返回列表