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

HTMLDOMスタイルbackgroundAttachmentプロパティ

backgroundAttachmentプロパティは、背景画像がページコンテンツに対してスクロールするかどうかを設定または取得するために使用されます。

構文

以下は、-

の構文です。

backgroundAttachmentプロパティの設定-

object.style.backgroundAttachment = "scroll|fixed|local|initial|inherit"

値

以下は値です-

Sr.No 値と説明
1 スクロール
これはデフォルト値であり、画像とともに背景をスクロールさせます。
2 修正済み
これにより、ビューポートに関する背景が修正されます。
3 ローカル
要素の内容と一緒に背景をスクロールさせるため。
4 初期
このプロパティを初期値に設定します。
5 継承
親プロパティ値を継承します。

例

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

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      background-image: url("https://www.tutorialspoint.com/artificial_intelligence_with_python/images/artificialintelligence-with-python-mini-logo.jpg");
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: top;
   }
   article {
      color: white;
      background: rgba(0, 0, 0, 0.4);
   }
</style>
<script>
   function changeAttachment(){
      document.getElementById("BODY1").style.backgroundAttachment="local";
      document.getElementById("Sample").innerHTML="The background will now scroll along with the page.";
   }
</script>
</head>
<body id="BODY1">
<h2>This is demo heading</h2>
<p>Curabitur tincidunt elit libero, sed ullamcorper urna ullamcorper ut.
Nulla scelerisque, quam in efficitur porta, nisi turpis blandit odio, vitae ultricies lectus ex vel felis.
Proin lectus nulla, cursus vitae massa ac, mollis gravida orci. Cras euismod imperdiet elit, aliquet placerat purus bibendum vel.
Nullam vehicula urna non ullamcorper congue. Etiam volutpat gravida tempus. Fusce non volutpat diam.
Nullam sagittis condimentum dui, a pharetra mi commodo nec. Cras vulputate hendrerit ornare.
Sed id ligula sit amet arcu dapibus molestie nec at risus.
Aliquam gravida, dolor non vehicula lobortis, augue erat gravida metus, id eleifend ante risus vel turpis.
Nunc fermentum scelerisque nulla, non gravida dui consequat malesuada. Pellentesque mollis scelerisque quam ac efficitur.
Nunc ante velit, efficitur vitae dignissim semper, maximus in mi.</p>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<p> Vivamus eget nisi eu libero viverra vestibulum. Nulla luctus ultrices metus, nec dapibus magna dignissim eget. Ut sed posuere erat.</p>
<p>Nunc ante velit, efficitur vitae dignissim semper, maximus in mi.</p>
<p>Pellentesque vitae est eget est tempus pretium.
Phasellus semper erat efficitur justo tristique sollicitudin.
Morbi mi eros, aliquet ac gravida ac, tempor et ante. </p>
<p>Aenean non justo non lorem accumsan fermentum efficitur at quam.
Morbi rhoncus lacus sed est luctus, a hendrerit est ullamcorper.
Etiam quis nisl non sem fringilla ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Donec ac malesuada turpis. Donec dapibus diam metus, nec blandit tellus vulputate quis.</p>
<p>Donec blandit tincidunt ante, sed blandit massa volutpat eu. Mauris ac porta lectus, et vulputate ante.</p>
<p>Click the below button to change the above div backface visibility value</p>
<button onclick="changeAttachment()">CHANGE ATTACHMENT</button>
<p id="Sample"></p>
</body>
</html>

出力

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

HTMLDOMスタイルbackgroundAttachmentプロパティ

[添付ファイルの変更]ボタンをクリックすると、画像が上部に固定され、下部に表示されなくなります-

HTMLDOMスタイルbackgroundAttachmentプロパティ


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

    HTML DOMスタイルのtransformOriginプロパティは、2Dまたは3D変換を返し、HTMLドキュメントの要素に適用します。 構文 以下は構文です- transformOriginを返す object.style.transformOrigin transformOriginの変更 object.style.transformOrigin = “value” 値 ここで、値は-になります。 値 説明 継承 このプロパティ値は親要素から継承されます。 初期 このプロパティ値をデフォルト値に設定します。 x軸y軸z軸 ビュー

  2. HTMLDOMスタイルの引用符プロパティ

    HTML DOMスタイルのquotesプロパティは、HTMLドキュメントで引用符を囲むための引用符のタイプを返し、変更します。 構文 以下は構文です- 引用符を返す object.style.quotes 見積もりの​​変更 object.style.quotes = “value” 値 ここで、値は-になります。 値 説明 継承 このプロパティ値は親要素から継承されます。 初期 このプロパティ値をデフォルト値に設定します。 なし 引用に使用されるデフォルトのマーク（“”）を設定します。 文字列文字列 文字列文字列 引