CSSを上手に使って背景描画領域を指定しよう-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

CSSを上手に使って背景描画領域を指定しよう

醉折花枝作酒筹

Aug 12, 2021 pm 05:41 PM

css

前回の記事では背景画像をビューポートに固定する方法を学びましたので、「cssを上手に使って背景画像をビューポートに固定する」をご覧ください。今回は背景の描画領域を指定する方法について学習しますので、必要に応じて参考にしてください。

背景に他の要件がある場合はどうすればよいでしょうか?

まず、小さな例を見てみましょう。

  <style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      background-color: cornsilk;
      width: 300px;
      height: 300px;
      background-clip:content-box;
      padding:50px;
      border: 2px solid #ccc;
    }
  </style>
</head>
<body>
  <div>
<p>为了显示，表明这个一个div元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个div元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个div元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个div元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个div元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个div元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个div元素</p>
<p>为了显示，表明这个一个p元素</p>
</div>
</body>

この小さな例の結果は、

CSSを上手に使って背景描画領域を指定しよう

この例の背景色がボックスを完全に塗りつぶしていないことがわかります。 ?毛織物?コードを振り返ると、background-clip:content-box; を使用していることがわかります。

それでは、この属性を見てみましょう。

background-clip属性は背景の描画領域を指定します。要素の背景（背景画像または背景色）が境界線、パディングボックス、および下に広がるかどうかを設定します。コンテンツボックス。

背景画像 (background-image) または背景色 (background-color) が設定されていない場合、この属性は境界線 (#) でのみ使用されます。 ##border) 視覚効果は、非ソリッド (soild)、透明または半透明 (border-style または ## に関連) に設定されている場合にのみ表示されます。 #border-image )、そうでない場合、この属性によって生成されたスタイルの変更は境界線によって上書きされます。この属性には、

border-box

、padding-box、content-box、という 4 つの値があります。文章＃＃＃。ボーダーボックスは、背景がボーダーの外縁 (ただしボーダーの下) まで広がることを意味し、パディングボックスは、背景がパディングの外縁まで広がることを意味します。境界線には描画されません。content-box は、背景がコンテンツ領域 (コンテンツボックス) の外縁にクリップされることを意味します。text は、背景がテキストの前景色にクリップされることを意味します。 推奨学習: css ビデオチュートリアル

以上がCSSを上手に使って背景描画領域を指定しようの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

CSS IDS対クラス：アクセシビリティに適しているのはどれですか？May 10, 2025 am 12:02 AM

classesarebetterforaccesibility inwebdevelopment.1）ClassscanbeappliedTomultipleements、sunsistentStylesandbehaviorsを保証します

CSS：クラスセレクターとIDセレクターの違いを理解するMay 09, 2025 pm 06:13 PM

classSeLectorEreusableformultipleElements、whiledselectorectorsareuniqueandusedonceperpage.1）クラスは、byperiod（。）、areideal forstylingmultipleementslikebuttons.2）、ids（＃）、aerpectforuniqueelementslikeanivigationmenu.3）idshsheaveavehe.3）を示します

CSSスタイリング：クラスセレクターとIDセレクターの選択May 09, 2025 pm 06:09 PM

CSSスタイルでは、プロジェクトの要件に従ってクラスセレクターまたはIDセレクターを選択する必要があります。1）クラスセレクターは再利用に適しており、同じスタイルの複数の要素に適しています。 2）IDセレクターは一意の要素に適しており、優先度が高いが、メンテナンスの困難を避けるためには注意して使用する必要があります。

HTML5：制限May 09, 2025 pm 05:57 PM

html5hasseverallimitationsincludingluding foradvancedgraphics、basicformvalidation、cross-browsercompatibilityissues、performurympacts、andsecurityconcerns.1）forcomplexgraphics、html5'scanvasisisuffish、resiclirarielikelikelikeweblorthree.2）i

CSS：あるスタイルは別のスタイルよりも優先されますか？May 09, 2025 pm 05:33 PM

はい、ounestylecanhavemorepiritythananincssduetsificity andthecascade.1）dipitiesalityactsasascoringsystemwheremorepifictoreshavehigherpriolity.2）thecascadedededereminesstytyleapplication order、

HTML5仕様の重要な目標は何ですか？May 09, 2025 pm 05:25 PM

theSignificAntgoalsofhtml5aretoenhancemultimediasupport、Humanreadability、維持、Andensurebackwardcompativecivity.1）html5improvesmultimediawithnativeelementslikeand.2）ituseSseSseSseSseSseSseSseSseSseSmanticeForementionforementionforementionforementionforementionforemention foremantemention

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を理解してください

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。