纯CSS实现图片_html/css_WEB-ITnose-html教程-PHP中文网

纯CSS实现图片_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:42:55

原创

1477人浏览过

在web开发中，通过css代码也可以实现一些简单的图片，当然，如果你有耐心，也可以实现较为复杂的图片噢。

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

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

其实现代码如下：

立即学习“前端免费学习笔记（深入）”；

纯CSS实现鼠标经过图片特效炫酷切换动画

纯CSS实现鼠标经过图片特效炫酷切换动画代码下载。

482

查看详情

<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实现图片在应用中还是挺广泛的。