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

ホームページ

ウェブフロントエンド

フロントエンドQ&A

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Apr 20, 2022 pm 05:29 PM

css

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で背景を並べずに中央揃えに設定する方法 )

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

声明

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

Reactの限界は何ですか？May 02, 2025 am 12:26 AM

raceslimitationsinclude：1）asteeplearningcurveduetoitsvastecosystem、2）seochallengeswithsclient-siderEndering、3）潜在的なパフォーマンスのinlargeapplications、4）complenstatemanagementasappsgrow、and5）suneedtokeepupwithovolution

Reactの学習曲線：新しい開発者にとっての課題May 02, 2025 am 12:24 AM

ReactisChallengingを使用して、SteepLearNdParadigMshiftOconpontenAchitecture.1）startisofficialdocumentation forasolidfoundation.2）relondingjsxandjavascriptwithinit.3）LearntousefunctionalcompotontiTateを理解してください

反応の動的リストの安定したユニークなキーを生成するMay 02, 2025 am 12:22 AM

coreChallengeingEneratingは、duniqueys consinistinsidentifientiversre-renderseforeffiencedomupdates.1）aseenaturalKeysisisisisisisisedisederiableiableiaibuniqueandStable.2）denatekeysBaseTheBasedOnMultipreattributive.2）を無効にすることを非難することを解決します

JavaScriptの疲労：Reactとそのツールで最新の状態を維持しますMay 02, 2025 am 12:19 AM

javascriptfatigueinReactismainageable with rikeislikedivedingingindininginginformationscors.1）whatyouneedwhenyouneedit、focusingonprojectrelevance.2）

UseState（）フックを使用するコンポーネントをテストしますMay 02, 2025 am 12:13 AM

ESTESTROACTCOMPONENTSINGTHESESTATEHOOK、USEJESTANDREACTINTINGLIBRARYTOSIMULATE INTERACTIONSIONDANDVERIFYISTAMESISINTHEUI.1）RENDERTHECONCENTANDCHECKECHINITATA.2）SimulateUserIractionSionsionsionsionsionsionslikeClickSorformSubmissions.3）

Reactのキー：パフォーマンスの最適化技術への深い飛び込みMay 01, 2025 am 12:25 AM

keysinReactarecialforptimizingperformancebyididingineffictientListupdates.1）usekeystoidentifideidifyandtracklistelements.2）ArrayIndicesassyStopreventPerformanceSues.3）suoseStableidedifierslikeItem.idtomaincomentaindtateandiproveperift

Reactのキーとは何ですか？May 01, 2025 am 12:25 AM

ReactKeySareUniqueIdentifiersiersiderSuredStrovereconconiniationEfficiency.1）theyctrackChangesinListitems、2）sultanduniqueidentifiersiirsiTeemidssisssississmendを使用して、3）ArrayIndicesAssayStopReventisSuseSUSEORINGを回避します

反応におけるユニークな鍵の重要性：一般的な落とし穴を避けるMay 01, 2025 am 12:19 AM

sinqueysarecrucialinReactforoptimizing andMaintainingcomponentStateIntegrity.1）useanaturaluniqueidentifierfromyourdataifaibable.2）ifnonaturalidentifierexists、発電済みのKeyusingingingingalibrarylikuuid.3）

See all articles