标签:
第四章 背景图像效果
1.基础
默认情况下,浏览器水平和垂直地重复显示背景图像,让图像平铺在整个页面上。
body { background-image:url(/img/pattern.fig); }
可以选择水平、垂直、不平铺:repeat-x、repeat-y、no-repeat
body { background-image: url(/img/pattern.gif); background-repeat: repeat-x; }
可以设置背图位置
如: 元素左边,垂直居中。(也可以使用像素和百分数实现)
h1 { padding-left: 30px; background-image: url(/imd/bullet.gif); background-repeat: no-repeat; background-position: left center; }
简写:
h1 { background: #ccc url(/img/ddd.gif) no-repeat left center; }
2.圆角框
1》固定宽度的圆角框——可以通过背景图像实现圆角
上边top一个图、下边bottom一个图,中间用背景色连接
灵活的,可宽度扩展的,可以设置4个角各一张图,然后宽度设置em单位,可根据字号拉伸。
2》多背景、border-radius、border-image
3.投影
1》图片负外边距偏移
2》图像加上边框和内边距
3》box-shadow:
需要4个值:垂直和水平偏移、投影的宽度和颜色
4.不透明度:
opacity: 0.8
background-color: rgba(0,0,0,0.8)
标签:
原文地址:http://www.cnblogs.com/congyue-pepsi/p/5741315.html