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

JavaScriptで背景画像のポジショニングエリアを設定するにはどうすればよいですか？

JavaScriptで背景画像の配置領域を設定するには、 backgroundOriginを使用します プロパティ。

例

次のコードを実行して、背景の画像のポジショニング領域を設定する方法を学ぶことができます-

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            border: 2px dashed yellow;
            padding: 35px;
            width: 600px;
            height: 400px;
            background: url('https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg') no-repeat;
         }
      </style>
   </head>
   <body>
      <button onclick="display()">Set area of background image</button>
      <div id="box">
         This is Demo Text! This is Demo Text! This is Demo Text!
         This is Demo Text! This is Demo Text!
      </div>
      <script>
         function display() {
            document.getElementById("box").style.backgroundOrigin = "content-box";
         }
      </script>
   </body>
</html>

  1. JavaScriptでスモールキャピタルで表示されるフォントを設定するにはどうすればよいですか？

    フォントを小文字で設定するには、 fontVariantを使用します プロパティ。 例 次のコードを実行して、JavaScriptでフォントを小文字で表示するように設定できます- <!DOCTYPE html> <html>    <body>       <h1>Heading 1</h1>       <p id="myID">          This is De

  2. JavaScriptで画像をリストアイテムマーカーとして設定するにはどうすればよいですか？

    list-itemのマーカーとして画像を設定するには、 listStyleImageを使用します JavaScriptのプロパティ。 例 次のコードを実行して、JavaScriptで画像をリストアイテムマーカーとして設定することができます- <!DOCTYPE html> <html>    <body>       <ol id="myID">          <li>One</li>