CSS3.0背景图片

来源:互联网 发布:网络爬虫怎么用 编辑:程序博客网 时间:2024/06/05 11:03

BackGround
CSS允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。
background-size规定背景图片的尺寸。
background-size:cover;
cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
contain把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
background-repeat 规定如何重复背景图像
background-repeat: no-repeat;
background-attachment:fixed;
CSS创建透明图像
注释:CSS opacity属性是W3C CSS推荐标准的一部分;
filter:alpha(opacity=XX) 是IE滤镜

.transparent_class{    filter:alpha(opacity=50);    -moz-opacity:0.5;    -khtml-opacity:0.5;    opacity:0.5;}

渐变:
渐变可以创建类似于彩虹的效果,低版本的浏览器不得不使开发者用图片来实现,CSS3将会轻松实现网页渐变效果。
background:-webkit-linear-gradient(#ffffff,#000000)

个性化边框
CSS3新增三个边框属性:
1。Border-radius 圆角边框
2。Box-shadow 边框阴影
3。Border-image 图片边框

阴影
在CSS3中,box-shadow用于向方框添加阴影
语法:

box-shadow:h-shadow v-shadow blur spread color inset;box-shadow: 0px 1px 3px rgba(0,0,0,0.35)

h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。
inset 可选。将外部阴影变为内部阴影

原创粉丝点击