Pure CSS implementation picture_html/css_WEB-ITnose-HTML Tutorial-php.cn

Pure CSS implementation picture_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:42:55

Original

1141 people have browsed it

In web development, some simple pictures can also be realized through CSS code. Of course, if you have the patience, you can also realize more complex pictures.

So why don’t you use some images but need to use CSS to implement them? First, because of performance reasons, pictures put much more pressure on the server and client than a few lines of CSS code; second, because it is not necessary, some simple effects can be completed directly using CSS, why do we need to go to the trouble of introducing pictures? Woolen cloth?

For example, the lower triangle of the selection list in the famous bootstrap is implemented through CSS. The effect is as follows:

The implementation code is as follows:

<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:'';}

Copy after login

You can see , the principle of triangle implementation is actually to use border-left, border-right and border-top. Show the bounding area of the triangle by making the left and right borders transparent.

Code location: http://runjs.cn/code/o3miehqr

Let’s take a look at an interesting application. In many websites, when the image is not loaded, There is an alternative image to replace it, as follows:

In fact, this image is implemented through CSS code. The code is as follows:

<!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>

Copy after login

Code location: http://runjs.cn/code/zj0bbjpw
The principle is to construct triangles and circles. Use border and border-radius. Therefore, CSS images are widely used in applications.