ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで背景を変更しないように設定する方法

CSSで背景を変更しないように設定する方法

藏色散人
藏色散人オリジナル
2021-04-09 09:31:014116ブラウズ

CSS の背景を固定する設定方法: 最初に HTML サンプル ファイルを作成し、次に head タグと CSS スタイル タグのコードを入力し、スタイル タグの間に背景画像を定義するコードを入力します。 Web ページ; 最後に「background -repeat:no-repeat」属性を設定するだけで十分です。

CSSで背景を変更しないように設定する方法

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

まず、システム メモ帳プログラムを開き、Web ページの基本コードを入力します。

<html>
 <body>
 </body>
</html>

CSSで背景を変更しないように設定する方法

次に、head タグと CSS スタイル タグ コードを入力します

<head>
  <style type="text/css">
  </style>
</head>

CSSで背景を変更しないように設定する方法

スタイル タグの間をクリックして、Web ページの背景画像を定義するコードを入力します。

body
{ 
  background-image:url(&#39;d:/bg.gif&#39;);
}

CSSで背景を変更しないように設定する方法

##次に、いくつかのコードを入力します。 body タグと body タグの下のコンテンツ

<body>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
</body>

CSSで背景を変更しないように設定する方法

ファイルをクリックしてコマンドとして保存し、コンテンツを HTML 形式で保存し、Web ページを開いてプレビューします。

CSSで背景を変更しないように設定する方法

この状況では、マウス ホイールをスクロールすると、Web ページのコンテンツと背景画像が同時にスクロールすることに誰もが気づきました。画像が繰り返し表示されないようにコードを修正してください。

<style type="text/css">
body 
{
background-image:url(d:/bg.gif);
background-repeat:no-repeat;
}
</style>

次に、エフェクトをプレビューします。

CSSで背景を変更しないように設定する方法

このようにして、背景画像の変更を明確に確認できます。背景画像を修正するには、コードを

<style type="text/css">
body 
{
background-image:url(d:/bg.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
</style>

に変更します。の効果。

CSSで背景を変更しないように設定する方法

[推奨学習:

css ビデオ チュートリアル]

以上がCSSで背景を変更しないように設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。