HTML5の背景表示領域の実装
2022-01-12 18:28:17
background-clip 属性は、背景を描画する領域を指定する。
デフォルト値：border-box
/{br
継承：なし
バージョン CSS3
JavaScript の構文：object.style.backgroundClip="content-box"
background-clip: border-box|padding-box|content-box。
border-box 背景がボーダーボックスまで切り取られます。 テスト
padding-box 背景が内側のマージンボックスまで切り取られる。 テスト
content-box 背景がコンテンツボックスに切り取られます。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>background display area</title>
<style type="text/css">
div {
padding:50px; /* set inner margin to 50px */
border:50px solid rgba(255, 153, 0, 0.6); /* set border width to 50px */
height:100px;
width:200px;
color:#fff;
font-size:24px;
font-weight:bold;
text-shadow:2px 0 1px #f00,
-2px 0 1px #f00,
0 2px 1px #f00,
0 -2px 1px #f00;
background-image:url(. /images/Bridge.jpg); /* Set the background image */
background-position:0 0; /* background-image start bit is the origin */
background-repeat:no-repeat; /* background-image is not tiled */
-webkit-background-origin:border-box; /* origin from border (webkit) */
-moz-background-origin:border-box; /* origin from border (moz) */
background-origin:border-box; /* origin from border */
-webkit-background-clip:border-box; /* background from border (webkit) */
-moz-background-clip:border-box; /* background from border (moz) */
background-clip:border-box; /* background-from-border-box */
}
</style>
<body>
<div> content starts here </div>
</body>
</html>
この記事はHTML5の背景表示領域について紹介しています、より関連するHTML5の背景表示領域の内容は、スクリプトハウスの過去の記事を検索してください、または以下の関連記事を引き続き閲覧してください、私はあなたが将来よりスクリプトハウスをサポートすることを願っています
関連
-
ピクセル画像を描画するCanvasのサンプルコード
-
Html5で新しくなったこと
-
window.postMessage を用いた html5 のクロスドメインデータインタラクション
-
キャンバス描画の解像度が拡大され、ぼやけた状態になる
-
htmlページでsessionの値を取得する方法
-
画像アップロードとキャンバス圧縮処理の解析
-
html5でhotcss.jsを使い、携帯電話の自己適合を実現する方法
-
IOSキーボードがfocusoutイベントでしまわれたときに元の場所に戻らない問題を解決する
-
HTML5 における dialog 要素のテイスト
-
ivxプラットフォーム開発：9箱の抽選機能をコードレスで実装する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン