|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
CSS背景 | 马黑黑
HTML支持对可视网页对象设置背景,但功能相对简单、粗糙,还是CSS对盒子背景的设置更为丰富细致。
一、背景色
简化语法:background:#000;
标准语法:background-color:#000;
简化语法又称缩写语法,它简化的意义在于可以用一个语句同时表示多个属性,而标准语法是针对单一属性的。
background-color 以纯色设置HTML可视对象的背景。有时候,纯色的效果过于单调,这时,我们可以考虑用 rgba 的颜色表达法,它能给元素的背景色设计一个alpha透明效果:
background-color:rgba(0,0,0,0.8);
二、背景图像
CSS设置对象底图功能比你想象的厉害,它可设置底图尺寸、位置、重复与否、覆盖范围,甚至可以设置多个底图。
缩写语法:background:url(图片);
标准语法:background-image:url(图片)
论坛中因论坛程序对字符串的处理机制,图片地址起止处要用小角引号(建议用单引号)。
图片默认是平铺展开的,要控制底图是否平铺,以及其它的功能,我们需要:
(一)重复
background-repeat:repeat/no-repeart/repeat-x/repeat-y;
缺省值 repeat,no-repeat 图像只出现一次,repeat-x 和 repeat-y 是横向、纵向铺开。
所谓缺省值,指没有设置某个属性的时候,系统默认采用的设定。比方说重复与否,缺省值是repeat,若没有指定 background-repeat,则默认是 repeat 的。
(二)位置
background-position:top/left/bottom/right/center
left之类的表达,还可以组合表达,如 top right;可以 xy 像素值,如 50px 50px;百分比也可以用。
设置多个底图时,必需给定图像位置,平铺的那张也要给,否则图片堆叠在一起,只能看到第一张。
(三)大小
background-size:xpx ypx/n% n%
宽度与高度表达,如 background-size:300px 200px; 或 background-size:50% 50%
图片大于背景尺寸,或因需要,可以也应该设置背景图的大小,整体效果更为理想。
(四)裁剪
background-clip:border-box/padding-box/content-box/text
这些值的作用:
border-box :背景延伸至边框外缘(保留边框)
padding-box:背景延伸至内边距外缘
content-box:背景覆盖内容区(直达但不突破内边距内缘)
text :背景被裁剪成文字的前景色(浏览器有限支持)
使用 text 值时,因为浏览器的开发滞后于CSS的发展,对此设置的支持度不是很好。使用用如下语句兼容性更佳:
-webkit-background-clip:text;
(五)多个背景图
简化语法:background:url(图1),url(图2)
标准语法:background-image:url(图1),url(图2);
当使用多个图片做底图,每个属性也是用英文逗号分隔对应各图的值,例如设置它们的重复与否和位置:
background-repeat:no-repeat,repeat;
background-position:right top,leftbottom;
简化语法则如此表示:
background: url(图1) no-repeat, url(图2) repeat;
注意,如果设置不当或不设置,多图做底图时会出现不可预期的效果。
CSS背景的内容不止这些,但领会了上面这些就已经差不多了,够用,又是深入学习下去的基础。
|
评分
-
| 参与人数 3 | 威望 +130 |
金钱 +260 |
经验 +130 |
收起
理由
|
小辣椒
| + 50 |
+ 100 |
+ 50 |
赞一个! |
加林森
| + 30 |
+ 60 |
+ 30 |
赞一个! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|