CSSで背景を並べずに中央揃えに設定する方法-フロントエンドQ&A-php.cn

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

WBOY

リリース： 2022-04-20 17:32:43

オリジナル

2807 人が閲覧しました

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

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

このチュートリアルの動作環境: 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で背景を並べずに中央揃えに設定する方法 )