纯CSS实现图片
2015-06-12 09:24
337 查看
在Web开发中,通过CSS代码也可以实现一些简单的图片,当然,如果你有耐心,也可以实现较为复杂的图片噢。
那么请问为什么有图片不去用而需要用CSS来实现呢?一是因为性能的原因,图片带给服务器和客户端的压力比几行CSS代码要大得多;二是因为没有必要,有些简单的效果利用CSS就可以直接完成了,为什么还需要麻烦地引入图片呢?
比如大名鼎鼎的bootstrap中选择列表的下三角就是通过css实现的。效果如下:
其实现代码如下:
可以看到,三角形实现的原理其实就是利用了border-left,border-right以及border-top。通过将左右边框设为透明状,来显示三角形的边界区域。
代码位置:http://runjs.cn/code/o3miehqr
下面再来看看一个有趣的运用,很多网站中,当图片未加载出来时,都有一个替代的图片来顶替,如下:
其实这个图片是通过CSS代码来实现的。代码如下:
其原理就是构建三角形和圆形。利用了border和border-radius。所以说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>代码位置:http://runjs.cn/code/zj0bbjpw
其原理就是构建三角形和圆形。利用了border和border-radius。所以说CSS实现图片在应用中还是挺广泛的。
相关文章推荐
- 巧用CSS3 :target 伪类制作Dropdown下拉菜单(无JS)
- CSS禅意花园——CSS设计的绝美境界
- ActionBar 样式详解 -- 样式 主题 简介 Actionbar 的 icon logo 标题 菜单样式修改
- CSS3 选择器
- JS、CSS命名规范
- 用CSS截断字符串
- CSS的盒子模型
- CSS在线学习
- 样式与主题
- css元素居中实现方法
- Windows Phone 三、样式和资源
- TIKZ全局样式设置
- css中div高度自适应
- 网页 css 样式 初始化
- CSS3 transform实现图片投影效果
- css sprite---css精灵网页图片应用处理方式分析
- HTML、CSS部分
- 【HTML+CSS】(2)CSS Sprite雪碧图
- css学习笔记
- css !important用法以及CSS样式使用优先级判断