CSSで背景を変更しないように設定する方法-CSSチュートリアル-php.cn

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

藏色散人

リリース： 2023-01-04 09:35:31

オリジナル

4098 人が閲覧しました

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 サイトの他の関連記事を参照してください。