CSS3 写出漂亮背景图

有段时间没写 CSS 了,想起之前米聊求缘猫背景的写法,因为项目中 js 整得比较多,一直都没有机会尝试一下。利用周末写个小 Demo , 给感兴趣的同学做个参考!

    先来看看 css 中几个控制元素背景的 background 属性:

 

01 background //复合属性
02  
03 background-color //设置或检索对象背景颜色
04  
05 background-image ///设置或检索对象的背景图像
06  
07 background-repeat //设置或检索对象的背景图像如何铺排填充
08  
09 background-attachment //设置或检索对象的背景图像是随对象内容滚动还是固定的
10  
11 background-position //设置或检索对象的背景图像位置
12  
13 background-origin //设置或检索对象的背景图像显示的原点
14  
15 background-clip //设置或检索对象的背景向外裁剪的区域
16  
17 background-size //设置或检索对象的背景图像的尺寸大小

 

    我们的背景图效果就是基于以上的几个 background 属性写的,先来看看效果:

 点击查看原图

 

    实践是王道,不做过多的讲解,看代码:

 

1 .horizontal {
2   background-color#0ae;
3   background-image: -webkit-gradient(linear, 0 00 100%, color-stop(.5, rgba(255255255, .2)), color-stop(.5transparent), to(transparent));
4   background-image: -webkit-linear-gradient(rgba(255255255, .250%transparent 50%transparent);
5   background-image: -moz-linear-gradient(rgba(255255255, .250%transparent 50%transparent);
6   background-image: -ms-linear-gradient(rgba(255255255, .250%transparent 50%transparent);
7   background-image: -o-linear-gradient(rgba(255255255, .250%transparent 50%transparent);
8   background-image: linear-gradient(rgba(255255255, .250%transparent 50%transparent);
9 }
    更多详细写法请看示例 Demo
 
© 2001-2017 MYSZIIT.COM. All Rights Reserved.