css background 1行のコードで、背景画像のアダプティブビューポートを実現し、ストレッチしない

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

もっとバックグラウンドスキルを学びませんか？

1.背景は、次の7つのCSSプロパティの総称です。

background-color：属性設定要素の背景色。
background-position：属性は、背景画像の開始位置を設定します。
background-size：属性は背景画像のサイズを指定します。
background-repeat：並べて表示するかどうか（デフォルトの並べて表示）。
background-origin：この属性は、background-position属性が相対的に配置される場所を指定します。
background-clip：属性は背景の描画領域を指定します;
background-attachment：この属性は、背景画像を固定するか、ページの残りの部分と一緒にスクロールするかを設定します。
background-image：属性は、要素の背景画像を設定します。

参照：w3schoolの背景。

第二に、背景属性のリンク

たとえば、上の写真の背景では、純粋なcssを実現するのが難しいことは明らかです。全体像に直接切り込むことは間違いなく信頼できません。一方は互換性がなく、もう一方は読み込みが遅いです。オレンジ色のグラデーションの背景の上下に2枚の画像を配置しているだけであることを確認するのは難しくありません。

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

背景を書くためのメモ：

1.background：url（../ img / share_bg_top.png）no-repeat left -.3rem;これは背景単位ですが、2つの値の配置が前面の水平方向と背面の垂直方向である点が異なります。最終結果には影響しません。

ユニットは2.1で導入されました。複数の画像が必要な場合、背景画像は制限されず、カンマで区切ることができます。

3.背景サイズも単位に分割されます。もちろん、背景サイズは次のように連続書き込みで書き込むこともできます。

.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);
}

三、ダイナミックな背景を作る

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

4、テキストのグラデーション

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

5、クリップパスの使用

次の図は、クリップパスを使用して実装できる、頻繁に発生する要素の欠落コーナーの問題を示しています。

{
	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%);
}

さて、最初にここで終了しましょう。