纯CSS实现图片

最新推荐文章于 2022-07-12 09:36:44 发布

weixin_34129696

最新推荐文章于 2022-07-12 09:36:44 发布

阅读量104

点赞数

在Web开发中。通过CSS代码也能够实现一些简单的图片，当然，假设你有耐心，也能够实现较为复杂的图片噢。

那么请问为什么有图片不去用而须要用CSS来实现呢？一是由于性能的原因，图片带给server和client的压力比几行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实现图片在应用中还是挺广泛的。