HTMLDOMスタイルの背景プロパティ
backgroundプロパティは、要素に関連付けられた背景画像を設定または取得するために使用されます。これは省略形のプロパティであり、最大8つのプロパティを操作できます。
構文
以下は、-
の構文です。背景プロパティの設定-
object.style.background = "color image repeat attachment position size origin clip|initial|inherit"
値
以下は値です-
| Sr.No | 値と説明 |
|---|---|
| 1 | 色 要素の背景色を設定します。 |
| 2 | 画像 要素の背景画像を設定します。 |
| 3 | 繰り返し 背景画像の繰り返し方を設定します。 |
| 4 | 添付ファイル 背景画像を固定またはページと一緒にスクロールするように設定します。 |
| 5 | 位置 背景画像の開始位置を設定します。 |
| 6 | サイズ 背景画像のサイズを設定します。 |
| 7 | origin 背景のポジショニングエリアを指定します。 |
| 8 | クリップ 背景画像をどこまでペイントするかを設定します。 |
例
背景プロパティの例を見てみましょう-
<!DOCTYPE html>
<html>
<head>
<style>
#PIC{
width: 250px;
height: 150px;
border:solid 3px black;
font-weight:100;
text-align:center;
color:white;
font-size:40px;
background: url("https://www.tutorialspoint.com/python/images/python-mini.jpg") no-repeat fixed 2% 8%;
}
</style>
<script>
function changeBackground(){
document.getElementById("PIC").style.backgroundImage="url(https://www.tutorialspoint.com/csharp/images/csharp-mini-logo.jpg)";
document.getElementById("Sample").innerHTML="The background URL is now changed and new background image can be seen.";
}
</script>
</head>
<body>
<h2>Learning is fun</h2>
<div id="PIC">Tutorial</div>
<p>Click the below button to change the above background image for the div</p>
<button onclick="changeBackground()">CHANGE BACKGROUND</button>
<p id="Sample"></p>
</body>
</html> 出力
これにより、次の出力が生成されます-
背景の変更画像をクリックすると-
-
HTMLDOMスタイルフィルタープロパティ
HTML DOMスタイルフィルタープロパティは、要素の視覚効果を定義するために使用されます。 以下は、-の構文です。 フィルタプロパティの設定- object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()" 上記のプロパティ値は次のように説明されます- フィルター 説明 なし これは効果を指定しま
-
HTMLDOMスタイルlistStyleImageプロパティ
HTML DOMスタイルのlistStyleImageプロパティは、画像をリストアイテムマーカーとして設定または返すために使用されます。 以下は、-の構文です。 listStyleImageプロパティの設定- object.style.listStyleImage = "none|url|initial|inherit" 上記の特性は次のように説明されます- 値 説明 なし これはデフォルト値であり、画像は表示されません。 url 画像パスを指定します。 初期 このプロパティを初期値に設定します。 継承 親