简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > バックエンド開発 > C#.Net チュートリアル > 本文

質問と回答: CSS の背景画像の背景位置属性に関する問題

php是最好的语言
リリース： 2018-07-27 17:46:02
オリジナル
2105 人が閲覧しました

CSS の背景画像 CSS の背景画像の背景位置の左上は誰を基準にしていますか?このような疑問に遭遇した場合は、この記事を読み続けてください。

勉強中に次の問題が発生しました:

  1. CSS の背景画像の背景位置の左上は、content-box? パディングを基準にして誰ですか? -box?border-box?

  2. background 属性のbackground-imageとbackground-colorに対応するボックスは一致していますか?

  3. コンテナの右側に 10 ピクセル、下部に 10 ピクセルの位置に背景画像を作成するにはどうすればよいですか?

まず、ボックス モデルを見てみましょう。ボックス モデルは、外側から内側に向​​かって、margin-box、border-box、padding-box、content-box です。

次に、background-position の左上がどのボックスを基準にしているのかという最初の質問に答えてみましょう。答えは、パディングボックスの外側の端に関連しています。

次の HTML コードと CSS コードは、それぞれ class="myp" のコンテナの背景画像の設定を実装しています。背景画像の background-position 属性値は左上です。 HTML コードは次のとおりです。 

1 <p class="myp"></p>
ログイン後にコピー

CSS コードは次のとおりです。

質問と回答: CSS の背景画像の背景位置属性に関する問題

1 .myp{
2         height:300px;
3         width:400px;
4         border:10px solid black;
5         padding:20px;
6         background: url("road.png") no-repeat top left ;
7      }
ログイン後にコピー

質問と回答: CSS の背景画像の背景位置属性に関する問題

効果は次のとおりです。

myp のパディングが 20px に設定されていることがわかります。図の緑色はパディングを表します。背景画像の左上隅がちょうど位置合わせされています。 -box;

先ほど、背景画像がパディング ボックスの外縁を基準にしていることがわかりました。 2 番目の質問は、背景画像と、背景属性の対応する背景色のボックスは一致していますか?

先ほどの例では、CSS コードを少し変更し、背景をピンク色に設定し、枠線を点線に設定します。変更後の CSS コードは次のとおりです:

質問と回答: CSS の背景画像の背景位置属性に関する問題 

.myp{
        height:300px;
        width:400px;
        border:10px dashed black;
        padding:20px;
        background: url("road.png") no-repeat top left pink ;
ログイン後にコピー

質問と回答: CSS の背景画像の背景位置属性に関する問題

効果は次のとおりです。背景色が境界線の下まで広がっていることがわかります。これは、背景色が境界ボックスの外側の端を基準にしていることを示しています。したがって、背景画像と対応するボックスの背景色が一致していないことは誰もがはっきりと覚えています。

次に、3 番目の質問を見てみましょう。コンテナの右側に 20 ピクセル、下部に 20 ピクセルの位置に背景画像を作成する方法?

background-position: rightbottom のみの場合、下の図に示すように、背景画像が境界線に接しているだけであることがわかり、特に見苦しくなります。背景画像と境界線のパディング距離。

実際には、CSS3 は任意の角度に対する相対的なオフセットをサポートしています。オフセットの先頭にキーワードを指定する限り、背景の位置をbackground-positionに変更します。 : 右 20px 下 20px; 具体的な CSS コードは次のとおりです:

1

2

3

4

5

6

7

8

.myp{

width:400px;

##ボーダー:10px 無地 黒##;

#:20px;##背景:

url#(##"road.png"#) 繰り返しなし##;

#background-position

:right 20px bottom 20px ; }

效果如下：

此外如果我们还有一种方法，及将background-origin属性设置为content-box，（background-origin属性默认值为为padding-box，即相对于padding框来设置背景）这样就能让背景图片相对于content-box设置了。CSS代码如下：

.myp{
        height:300px;
        width:400px;
        border:10px solid black;
        padding:20px;
        background: url("road.png") no-repeat right bottom;
        background-origin: content-box;
     }
ログイン後にコピー

效果如下：

当然我们还可以用CSS的calc()函数，以相对于左上角偏移来计算，我们通过100%-20px,100%-20px通过能得到，只是比较麻烦了，CSS代码如下：

質問と回答: CSS の背景画像の背景位置属性に関する問題apache php mysql

1 .myp{
2         height:300px;
3         width:400px;
4         border:10px solid black;
5         padding:20px;
6         background: url("road.png") no-repeat right bottom;
7         background-position:calc(100% - 20px) calc(100% - 20px);
8      }
ログイン後にコピー

質問と回答: CSS の背景画像の背景位置属性に関する問題

 相关文章：

css中background-position属性用法总结

网页中css background背景图和背景颜色的设置方法

相关视频：

CSS深入理解之border视频教程

以上が質問と回答: CSS の背景画像の背景位置属性に関する問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
CSS中背景图
ソース：php.cn
前の記事：C++ における const 定数の一般的な使用法の分析と説明 次の記事：CSSセレクターとは何ですか? CSSセレクターの優先順位決定
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...
から 2024-04-06 20:57:16
0
1
487
CSS スタイルがサイトに適用されない Bootstrap5を使用してWebサイトを作成していますが、index.cssプロパティがindex.htmlに適用されません。サービス カードの上にマウスを移動すると、背景が変...
から 2024-04-06 17:12:23
0
1
336
非表示のサイドパネルを表示: チェックが入っています アニメーション化されたハンバーガー メニューを介してビューに切り替える機能を備えたナビゲーション メニューをサイド パネルに追加したいと考えています。 JSを使わずにCSSだけで作...
から 2024-04-06 15:49:33
0
1
319
CSS グリッドの高さが期待したものと異なるという問題が発生しています。どのような間違いを犯している可能性がありますか? 私は現在 CSS グリッドを学習しており、このカードをグリッドに分割して作成するように依頼されました。作りたいグリッドの写真を添付し​​ます。実際には、これらすべてのカードが配置さ...
から 2024-04-06 12:52:14
0
1
339
透過的なブラウザを起動して、Web アプリケーションと PWA のエクスペリエンスを向上させます [静的 HTML、CSS、JavaScript をサポート] [ユーザーが Web アプリケーション/PWA でデスクトップの壁紙を表示できるようにします] 私は現在、ソケットを使用した Web アプリケーション (チャット) を開発しているジュニアのフロントエンド開発者兼デザイナーです。私と友人が使用している言語は、Scala、HTM...
から 2024-04-05 13:50:12
0
1
1367
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！