ホームページ > 記事 > ウェブフロントエンド > CSSを使用して波状の背景を作成するにはどうすればよいですか?
CSSを使用して波状の背景を作成するにはどうすればよいですか?
- 藏色散人オリジナル
- 2021-08-20 14:25:322734ブラウズ
この記事「CSS を使用して高度なぼかした背景画像をすばやく作成する 」では、CSS を使用して高度なぼかした背景画像をすばやく作成する方法を紹介します。興味のある友人は、それについて学びに行ってください。 ~
この記事では、CSS を使用してウェーブの背景をすばやく実現し、ページにパーソナライズされた背景を確保する方法を紹介します。もちろん、実現したい背景スタイルがある場合は、 、コメントで教えてください。
注: この記事では、Before セレクターを使用して波状の背景を簡単に生成し、.png ファイル形式の波形イメージを使用します。この波形イメージは、自分で作成するか、ここ からダウンロードできます。 。
コードから直接始めましょう:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>
如何使用CSS创建波浪背景 ?
</title>
<style>
body {
padding: 0%;
margin: 0%;
}
.demo {
padding: 200px;
text-align: center;
}
section {
width: 100%;
min-height: 300px;
}
.pattern {
position: relative;
background-color: #3bb78f;
background-image: linear-gradient(315deg,
#3bb78f 0%, #0bab64 74%);
}
.pattern:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 250px;
background: url(
https://img.php.cn/upload/article/000/000/020/611f4b147b431604.png);
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<section class="pattern">
<div class="demo">
<h1>PHP中文网</h1>
</div>
</section>
</body>
</html>結果は次のとおりです:
上記のコードでは、まずこの部分に基本的な背景を追加し、次に before セレクターを使用して背景の上に wave png ファイルを設定し、wave の背景効果を実現します。
注:
<section></section> タグは、ドキュメント内のセクション (セクション、セクション) を定義します。章、ヘッダー、フッター、文書のその他の部分など。 (
:before セレクターは、選択された要素のコンテンツの前にコンテンツを挿入します。 (挿入するコンテンツを指定するには、content 属性を使用します。) また、IE8 以前の :before の場合、 を宣言する必要があります。
PHP 中国語 Web サイト プラットフォームには、多くのビデオ教育リソースがあります。皆さんも「css ビデオ チュートリアル 」を学習してください。
以上がCSSを使用して波状の背景を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。