码迷,mamicode.com
首页 > 其他好文 > 详细

background部分总结

时间:2017-02-13 08:47:32      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:颜色   ppi   hit   gradient   lin   透明   部分   log   class   

background:linear-gradient([position],color px......)  线性背景

还可以有一种写法:

background:-webkit-linear-gradient(to [position],color px)  不推荐这种写法

demo如下:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .app{
            width: 300px;
            height: 300px;
            

        }
        /*linear-gradient([位置] , [开始点颜色   占用多少位置], [结束点颜色  过渡大小])*/
        .app{
            background: 
            -webkit-linear-gradient( 135deg,  transparent 100px, deeppink 0);
            background: 
            -moz-linear-gradient( 135deg, red 0 , white 0);
        }
    </style>
</head>
<body>
   <div class="app"></div>
</body>
</html>

 

 

(效果如上)ps:有时候使用透明(transparent)会有意想不到的效果

 

background部分总结

标签:颜色   ppi   hit   gradient   lin   透明   部分   log   class   

原文地址:http://www.cnblogs.com/claireyu1219/p/6392361.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!