HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLDOMスタイルbackgroundRepeatプロパティ

style backgroundRepeatプロパティは、背景画像の繰り返し方法を設定または取得するために使用されます。

構文

以下は、-

の構文です。

backgroundRepeatプロパティの設定-

object.style.backgroundRepeat = "repeat|repeat-x|repeat-y|no-repeat|initial|inherit"

値

上記のプロパティ値は次のとおりです-

Sr.No 値と説明
1 繰り返し
これがデフォルト値です。背景画像を縦横両方に繰り返します。
2 repeat-x
これにより、背景画像が水平方向にのみ繰り返されます。
3 repeat-y
これにより、背景画像が垂直方向にのみ繰り返されます
4 繰り返しなし
背景画像を繰り返しません。

例

backgroundRepeatプロパティの例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      background-image: url("https://www.tutorialspoint.com/power_bi/images/power-bi-minilogo.jpg");
      background-repeat: repeat-x;
      color:black;
      font-size:20px;
   }
</style>
<script>
   function changeBackRepeat(){
      document.body.style.backgroundRepeat="repeat-y";
      document.getElementById("Sample").innerHTML="The background image is now repeated vertically";
   }
</script>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text.</p>
<p>This is demo text.</p>
<p>This is demo text.</p>
<p>This is demo text.</p>
<p>Change the body background image repeat value by clicking the below button</p>
<button onclick="changeBackRepeat()">CHANGE REPEAT</button>
<p id="Sample"></p>
</body>
</html>

出力

これにより、次の出力が生成されます-

HTMLDOMスタイルbackgroundRepeatプロパティ

CHANGEREPEATボタンをクリックすると-

HTMLDOMスタイルbackgroundRepeatプロパティ


  1. HTMLDOMスタイルフィルタープロパティ

    HTML DOMスタイルフィルタープロパティは、要素の視覚効果を定義するために使用されます。 以下は、-の構文です。 フィルタプロパティの設定- object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()" 上記のプロパティ値は次のように説明されます- フィルター 説明 なし これは効果を指定しま

  2. HTMLDOMスタイルlistStyleImageプロパティ

    HTML DOMスタイルのlistStyleImageプロパティは、画像をリストアイテムマーカーとして設定または返すために使用されます。 以下は、-の構文です。 listStyleImageプロパティの設定- object.style.listStyleImage = "none|url|initial|inherit" 上記の特性は次のように説明されます- 値 説明 なし これはデフォルト値であり、画像は表示されません。 url 画像パスを指定します。 初期 このプロパティを初期値に設定します。 継承 親