51可用代码模板网站

咨询热线:

181-1164-6936
  • 1
CSS样式
当前位置:首页>实用代码>CSS样式>

纯CSS实现图片

时间:2017-08-14 17:27点击:
Web开发中,通过CSS代码也可以实现一些简单的图片,当然,如果你有耐心,也可以实现较为复杂的图片噢。

那么请问为什么有图片不去用而需要用CSS来实现呢?一是因为性能的原因,图片带给服务器和客户端的压力比几行CSS代码要大得多;二是因为没有必要,有些简单的效果利用CSS就可以直接完成了,为什么还需要麻烦地引入图片呢?

比如大名鼎鼎的bootstrap中选择列表的下三角就是通过css实现的。效果如下:



其实现代码如下:


    <ul>  
        <li class="dropdown">dropdown</li>  
    </ul>  
      
    .dropdown:after {  
        position:absolute;  
        width:0;  
        height:0;  
        margin-top:8px;  
        margin-left:5px;  
        display:inline-block;  
        border-left:6px solid transparent;  
        border-right:6px solid transparent;  
        border-top:6px solid #000000;  
        content:'';  
    }  


可以看到,三角形实现的原理其实就是利用了border-left,border-right以及border-top。通过将左右边框设为透明状,来显示三角形的边界区域。

代码位置:http://runjs.cn/code/o3miehqr
下面再来看看一个有趣的运用,很多网站中,当图片未加载出来时,都有一个替代的图片来顶替,如下:


其实这个图片是通过CSS代码来实现的。代码如下:


    <!DOCTYPE html>  
    <html>  
        <head>  
            <meta charset="utf-8">  
            <title></title>  
            <style type="text/css">  
                #rectangle {  
                    position: relative;  
                    background:#FFFFFF;  
                    border:10px solid #999999;  
                    width:200px;  
                    height:120px;  
                }  
                #circle {  
                    position: absolute;  
                    background-color: #999999;  
                    width:40px;  
                    height: 40px;  
                    border-radius: 50%;  
                    margin-left:140px;  
                    margin-top:20px;  
                }  
                #triangle1 {  
                    position:absolute;  
                    width:0;  
                    height:0;  
                    border-left:40px solid transparent;  
                    border-right:70px solid transparent;  
                    border-bottom:80px solid #999;  
                    margin-top:30px;  
                    margin-left:10px;  
                }  
                #triangle2 {  
                    position:absolute;  
                    width:0;  
                    height:0;  
                    border-left: 30px solid transparent;  
                    border-right: 60px solid transparent;  
                    border-bottom:60px solid #999;  
                    margin-top:50px;  
                    margin-left: 80px;  
                }  
            </style>  
        </head>  
        <body>  
            <div id="rectangle">  
                <span id="circle"></span>  
                <span id="triangle1"></span>  
                <span id="triangle2"></span>  
            </div>  
        </body>  
    </html>  


其原理就是构建三角形和圆形。利用了border和border-radius。所以说CSS实现图片在应用中还是挺广泛的。

51可用模板(代码)网站专为广大站长朋友提供精品模板与代码,同时免费提供网站收录。
本站域名: WWW.51KYDM.COM    联系方式:QQ:182468923    手机:18111646936
本站关键词:网站链接收录网址收录入口网站免费提交收录网站收录提交入口    网站地图
51可用模板
展开