css background one line of code to realize the background image adaptive viewport and not stretch

background: url(../img/share_bg.png) no-repeat center / cover;

Don’t you learn more background skills?

1. Background is the collective name of the following seven CSS properties

background-color: the background color of the attribute setting element;
background-position: The attribute sets the starting position of the background image;
background-size: The attribute specifies the size of the background image;
background-repeat: Whether to tile (default tile);
background-origin: The attribute specifies where the background-position attribute is positioned relative to;
background-clip: The attribute specifies the drawing area of the background;
background-attachment: The attribute sets whether the background image is fixed or scrolls with the rest of the page;
background-image: The attribute sets the background image for the element.

Reference: w3school background .

Second, the background attribute linking

For example, in the background of the above picture, it is obvious that pure css is difficult to achieve. It is definitely not reliable to cut directly into the full picture. One is incompatible, and the other is slow loading. It is not difficult to see that it is just positioning two pictures on the top and bottom of the orange gradient background.

<html>
	<head>
		<meta charset="UTF-8">
		<title>主页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="asset/css/framework.css" />
        <style type="text/css">
			.ui-content{
				background: url(../img/share_bg_top.png) no-repeat left -.3rem,
							url(../img/share_bottom_bg.png) left bottom no-repeat,
							linear-gradient(to bottom,#e4a243,#f7a022);
				background-size: 100% auto,100% auto;
			}
		</style>
	</head>
	<body>
		<div class="ui-pane">
			<div class="ui-content">
			</div>
		</div>
	</body>
</html>

Notes for background writing:

1.background: url(../img/share_bg_top.png) no-repeat left -.3rem; this is a background unit, except that the positioning two values are the front horizontal direction and the back vertical direction, the order does not affect Final Results;

2.1 introduced a unit, when multiple pictures need to be combined, of course, the background pictures are not limited, we can separate them with commas;

3. The background-size is also divided into units, of course, the background-size can also be written in the continuous writing, such as:

.ui-content{
	background: url(../img/share_bg_top.png) no-repeat left -.3rem / 100% auto,
	url(../img/share_bottom_bg.png) left bottom no-repeat / 100% auto,
	linear-gradient(to bottom,#e4a243,#f7a022);
}

Three, make a dynamic background

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				width: 100%;
				height: 100vh;
				background: url(../jsbase/瀑布流/picture/7.jpg) no-repeat center / cover;
				animation: bgMove 5s infinite;
			}
			@keyframes bgMove{
				0%{
					background: url(../jsbase/瀑布流/picture/7.jpg) no-repeat center / cover;
				}
				25%{
					background: linear-gradient(to left,rgba(255,0,0,.4),rgba(255,0,0,.4)),url(../jsbase/瀑布流/picture/7.jpg) no-repeat center / cover;
				}
				50%{
					background: linear-gradient(to left,rgba(0,0,0,.4),rgba(0,0,0,.4)),url(../jsbase/瀑布流/picture/7.jpg) no-repeat center / cover;
				}
				75%{
					background: linear-gradient(to left,rgba(255,0,0,.4),rgba(0,255,0,.4)),url(../jsbase/瀑布流/picture/7.jpg) no-repeat center / cover;
				}
			}
		</style>
	</head>
	<body>
	</body>
</html>

Four, text gradient

{
	background-image: linear-gradient(to right,#ff0000,#00ff00);
	display: inline-block;
	-webkit-background-clip: text;
	color: transparent;
	animation: bg_move 1s infinite;
}

Five, use of clip-path

The following figure shows the frequently encountered element missing corner problem, which can be implemented using clip-path.

{
	width: 200px;
	height: 200px;
	background: red;
	clip-path: polygon(100% 0,0 0,0 calc(50% - 10px),20px 50%,0 calc(50% + 10px),0 100%,100% 100%);
}

Okay, let's finish here first.