ホームページ > 記事 > ウェブフロントエンド > CSSで背景を並べずに中央揃えに設定する方法

CSSで背景を並べずに中央揃えに設定する方法

WBOYオリジナル: 2022-04-20 17:29:002706ブラウズ

CSS では、「background:url(path) no-repeat center;」を使用して、背景を中央に配置し、並べて配置しないように設定できます。background 属性は、要素の背景スタイルを設定するために使用されます。「no-repeat」は背景を示すために使用され、タイリングではなく、center は背景が中央にあることを示すために使用されます。

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS で背景を並べて配置せず中央に配置するように設定する方法

background 属性を使用するだけです。

背景省略属性は、1 つのステートメントですべての背景属性を設定できます。

各値をスペースで区切ります。順序は問いません。背景: #FF0000 URL (smiley.gif); など、これらの値の一部のみが許可される可能性があります。

設定できるプロパティは次のとおりです。

##background-color は、使用する背景色を指定します。
background-position背景画像の位置を指定します
background-size 背景画像のサイズを指定します
##background-clip 背景画像の描画領域を指定
##background-attachment 背景画像を固定するか、ページの残りの部分と一緒にスクロールするかを設定します。
background-image 使用する 1 つ以上の背景画像を指定します。
例は次のとおりです。

<html>
<head>
<style type="text/css">
body
{ 
background: url(/i/eg_bg_03.gif) no-repeat center; 
}
</style>
</head>
<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>
</html>

出力結果:

(学習ビデオ共有:

css ビデオチュートリアル CSSで背景を並べずに中央揃えに設定する方法 )

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

html5 css css3 position background

声明：

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

前の記事：jqueryでdivのクラスを変更する方法次の記事：jqueryでdivのクラスを変更する方法

続きを見る