いわゆる固定背景画像とは、ページにコンテンツを入力したりマウスを動かしたりしても、背景画像が変化しないことを意味します。 CSS で背景画像の固定を実装することも非常に簡単です。これを実現するには、CSS で背景関連の属性を使用します。
おすすめ参考:「CSSチュートリアル」
前回の記事でも紹介しましたCSS を使用して背景画像の繰り返し効果を実現する方法。
それでは引き続きcssの背景画像固定の実装方法を紹介していきます。
コードは次のとおりです:
<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
<title></title>
<style type="text/css">
body {
background-image: url("/test/img/154e.png");
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>这里是一行文字：圣诞节快乐！</p>
<p>这里是一行文字：圣诞节快乐！</p>
<p>这里是一行文字：圣诞节快乐！</p>
<p>这里是一行文字：圣诞节快乐！</p>
<p>这里是一行文字：圣诞节快乐！</p>
<p>这里是一行文字：圣诞节快乐！</p>
</body>
</html>効果は次のとおりです:
##背景関連のプロパティ:
background-attachment プロパティ背景画像を固定するか、ページの残りの部分と一緒にスクロールするかを設定します。値が固定の場合は、ページの残りの部分がスクロールされても背景画像が移動しないことを意味します。
background-repeat 属性背景画像を繰り返すかどうか、どのように繰り返すかを設定します。
この記事は、CSS で背景画像の固定を実現する方法を紹介するもので、困っている友人の役に立てば幸いです。以上がCSSで固定背景画像を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
