検索
ホームページウェブフロントエンドCSSチュートリアルCSS3 チュートリアル: 背景クリップと背景原点

原文: http://www.planabc.net/2008/04/14/background-clip_background-origin/ 背景クリップと背景オリジンは、CSS3 で追加された新しい背景モジュール プロパティで、背景の位置を決定するために使用されます。 背景クリップは、背景に境界領域が含まれているかどうかを判断するために使用されます。そして、background-or
原文: http://www.planabc.net/2008/04/14/background-clip_background-origin/
background-clip と background-origin は、CSS3 で新しく追加された背景モジュール属性であり、決定するために使用されます。背景の位置決め。
Background-clip は、背景に境界領域が含まれているかどうかを判断するために使用されます。そして、background-origin は、background-position 計算の基準位置を決定するために使用されます。
構文は次のとおりです: 背景クリップ: [境界線のパディング] [, [境界線のパディング]]* 背景元: [境界線の内容] [, [境界線の内容]]*

背景クリップの場合:
パディング値の場合、背景はパディングエッジを無視し、境界線は透明になります。境界値の場合、背景には境界領域が含まれます。複数のbackground-image画像がある場合、対応するbackground-clip値をカンマで区切る必要があります。
background-originの場合:
パディング値の場合、位置はパディングエッジを基準とします(「0 0」はパディングエッジの左上隅、「100% 100%」は右下です)コーナー)。境界値の場合は、相対的な境界エッジを意味します。境界値はコンテンツの端を基準にしています。背景クリップと同様に、複数の値はカンマで区切られます。背景クリップがパディング値、背景原点が境界値、背景位置が「左上」(デフォルトの初期値)の場合、背景画像の左上隅が切り取られます。
これら 2 つのプロパティは CSS3 からのみ表示されます。このプロパティを使用しないバックグラウンド モジュールのデフォルトの動作はどうなりますか?
background-clip のデフォルトは、background-clip:border です。
background-origin のデフォルトは、background-origin:padding です。
ただし、IE は特殊なケースです (最悪です)。
IE6 および IE7 では、一般要素 (ボタンなどを除く) の背景は次と同等です。
hasLayout 要素 (ボタンなど) の背景は次と同等です。 : 背景-クリップ:パディング; 背景-原点:パディング;
この CSS3 プロパティのペアは Mozilla、Safari 3、Konqueror などのブラウザに実装されていますが、それらはすべてプライベート プロパティを通じて表現されます。
引用:
基本的に、IE 以外のブラウザのプライベート属性は通常 -xxx- で始まり、-o- は Presto をエンジンとする Opera の場合はプライベート、-icab- は iCab の場合はプライベート、そして -khtml- はKHTML をエンジンとして使用するブラウザ (Konqueror Safari など)、-moz- は Mozilla の Gecko をエンジンとして使用するブラウザ (Firefox、Mozilla など)、-webkit- は Webkit レンダリング エンジン (KHTML の派生) を使用するブラウジングを指します。ブラウザ(Safari、Swiftなど)。
サポートされているプラ​​イベート属性は次のとおりです: moz-背景-クリップ ウェブキットの背景クリップ khtml-背景-クリップ moz-背景-原点 webkit-background-origin khtml-背景-原点


以上がCSS3 チュートリアル: 背景クリップと背景原点の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
「ポッドキャストにサブスクライブ」リンクはどこにすべきですか?「ポッドキャストにサブスクライブ」リンクはどこにすべきですか?Apr 16, 2025 pm 12:04 PM

しばらくの間、iTunesはポッドキャストの大きな犬だったので、「ポッドキャストにサブスクライブ」をリンクした場合:

ブラウザエンジンの多様性ブラウザエンジンの多様性Apr 16, 2025 pm 12:02 PM

彼らが2013年にChromeに行ったとき、私たちはオペラを失いました。今年初めにChromeになったとき、Edgeと同じ取引。マイク・テイラーはこれらの変更を「減少させて」と呼びました

Web共有に関するUXの考慮事項Web共有に関するUXの考慮事項Apr 16, 2025 am 11:59 AM

Trashy ClickBaitサイトから出版物の最大の8月まで、共有ボタンは長い間ウェブ全体でユビキタスでした。それでも、これらは議論の余地があります

毎週のプラットフォームニュース:AppleはWebコンポーネント、プログレッシブHTMLレンダリング、自己ホストの重要なリソースを展開しています毎週のプラットフォームニュース:AppleはWebコンポーネント、プログレッシブHTMLレンダリング、自己ホストの重要なリソースを展開していますApr 16, 2025 am 11:55 AM

今週のラウンドアップでは、AppleはWebコンポーネント、InstagramがどのようにInsta-Loadingスクリプトであるか、自己ホストの重要なリソースのための考えのための食べ物に入ります。

git pathspecsとそれらの使用方法git pathspecsとそれらの使用方法Apr 16, 2025 am 11:53 AM

gitコマンドのドキュメントを調べていたとき、それらの多くが選択肢があることに気付きました。私は当初、これはただのものだと思っていました

製品画像のカラーピッカー製品画像のカラーピッカーApr 16, 2025 am 11:49 AM

難しい問題のように聞こえます。私たちはしばしば、何千もの色で製品ショットを持っていないので、withをひっくり返すことができます。私たちもそうしません

ReactとThemeproviderを使用した暗いモードの切り替えReactとThemeproviderを使用した暗いモードの切り替えApr 16, 2025 am 11:46 AM

ウェブサイトにダークモードオプションがあるときが好きです。ダークモードにより、ウェブページが読みやすくなり、目がリラックスしているように感じます。を含む多くのウェブサイト

HTMLダイアログ要素を使用したいくつかの実践HTMLダイアログ要素を使用したいくつかの実践Apr 16, 2025 am 11:33 AM

これは私が初めてHTML要素を見ていることです。私はしばらくの間それを知っていましたが、まだスピンしていませんでした。かなりクールです

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

mPDF

mPDF

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

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール