Share a special effect, the principle is very simple.
① -webkit-filter: CSS filter property, which can provide some effects for the rendering of the element before the element is rendered, such as blurring, color transfer and so on. Filters are often used to adjust the rendering of images, backgrounds, and borders.
Code:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-control" content="private, must-revalidate" />
<title></title>
</head>
<style>
*{margin: 0px;padding: 0px;}
.to{width:500px;height:500px;border-radius:500px;overflow:hidden;position:absolute;
//Absolute positioning, does not occupy the position
top:50%;
left: 50%;
margin-top: -250px;
margin-left: -250px;
}
</style>
<body>
<img style="position: absolute;-webkit-filter:blur(40px);opacity:0.4;width:100%;
height:100%;" src="1.jpg">
<div class="to">
<img style="margin-left:-950px;" src="1.jpg">
</div>
</body>
</html>
It can be made into a personal setting center background, the effect is very beautiful