HTMLDOMスタイルのbackgroundClipプロパティ
backgroundClipプロパティを使用すると、背景画像をペイントする距離、つまり背景画像のペイント領域を制御できます。そのペイントエリアを設定または戻すために使用されます。
構文
以下は、-
の構文です。backgroundClipプロパティの設定-
background-clip: border-box | padding-box | content-box
値
以下は値です-
| Sr.No | 値と説明 |
|---|---|
| 1 | ボーダーボックス これにより、ボーダーボックス内の背景がクリップされます。これがデフォルト値です。 |
| 2 | パディングボックス これにより、パディングボックス内の背景がクリップされます。 |
| 3 | コンテンツボックス 背景はコンテンツボックス内でクリップされます。 |
例
backgroundclipプロパティの例を見てみましょう-
<!DOCTYPE html>
<html>
<head>
<style>
#one {
box-shadow: 0 0 2px black;
padding: 18px;
background: skyblue;
background-clip: content-box;
}
</style>
<script>
function changeBackClip(){
document.getElementById("one").style.backgroundClip="padding-box";
document.getElementById("Sample").innerHTML="The background clip property is now padding-box";
background-clip: border-box | padding-box | content-box
}
</script>
</head>
<body>
<div id="one">
Phasellus eu justo lectus. Praesent et nulla facilisis, venenatis justo eget, tempor lectus.
Integer ut felis vel lectus convallis fermentum. Fusce ut felis mauris.</div>
<p>Change the above div background-clip value by clicking the below button</p>
<button onclick="changeBackClip()">CHANGE CLIP</button>
<p id="Sample"></p>
</body>
</html> 出力
これにより、次の出力が生成されます-
[クリップの変更]ボタンをクリックすると-
-
HTMLDOMスタイルbackgroundColorプロパティ
backgroundColorプロパティは、要素の背景色を設定または返すために使用されます。標準名、rgb（）、rgba（）、hsl（）、またはhsla（）で値を指定できます。 構文 以下は、-の構文です。 backgroundColorプロパティの設定- object.style.backgroundColor = "color|transparent 値 上記のプロパティ値は次のように説明されます- Sr.No 値と説明 1 色 背景色を指定します。 2 透明 背景色を透明に設定します。つまり、基になるコンテンツが表示されます。これはデ
-
HTMLDOMスタイルの背景プロパティ
backgroundプロパティは、要素に関連付けられた背景画像を設定または取得するために使用されます。これは省略形のプロパティであり、最大8つのプロパティを操作できます。 構文 以下は、-の構文です。 背景プロパティの設定- object.style.background = "color image repeat attachment position size origin clip|initial|inherit" 値 以下は値です- Sr.No 値と説明 1 色 要素の背景色を設定します。 2 画像 要素の背景画