如何使用 JavaScript 设置背景图片的定位区域？

在本教程中，我们将学习如何使用 JavaScript 设置背景图片的定位区域。

可以使用 HTML DOM Style 的 `background-origin` 属性来更改程序中背景图片的定位区域。

`background-origin` 是一种允许您修改网页背景图片的功能。此属性用于设置背景图片的原点。默认情况下，背景图片的原点设置为屏幕/网页的左上角。

`background-origin` 属性指定背景的原点：从边框开始、边框内或填充内。当 `background-attachment` 值设置为“fixed”时，此属性将不起作用。`background-origin` 属性与 `background-clip` 属性相同，只是它不是裁剪背景，而是调整背景大小。屏幕的左上角是元素的默认原点。

如果元素包含多个背景图片，我们可以使用逗号分隔每个背景图片的 `background-origin` 属性值。每张图片都将对应 `background-origin` 属性的值。

以下是使用 JavaScript 设置背景图片定位区域的方法。

使用 `backgroundOrigin` 的 `content-box` 属性

`backgroundOrigin` 属性提供背景图片的位置，并且使用 `content-box` 属性相对于内容框定位背景。背景从内容的左上角开始。`content-box` 属性覆盖放置在盒子内的内容。

填充框是默认值，并将背景相对于盒子定位。背景的起始点是填充边的左上角。

语法

document.getElementById("box").style.backgroundOrigin = "content-box";

使用 `getElementById()` 方法获取盒子，并将盒子的背景原点指定为 `content-box` 属性。

示例

在这个示例中，我们使用边框、填充、宽度、高度和背景颜色等参数创建了一个盒子。盒子内包含一些文本形式的内容。

该盒子包含一张图片，其定位区域指定为其默认值填充框。此属性更改为 `background-origin` 属性的 `content-box` 属性。此图片放置在盒子的填充区域中，并移至包含文本的区域。

<html>
<head>
<style>
   #box {
      border: 3px dashed red;
      padding: 35px;
      width: 500px;
      height: 260px;
      background:
      url('https://tutorialspoint.com/videotutorials/images/coding_ground_home.jpg') no-repeat;
      background-color: yellow;
      background-origin: padding-box;
   }
</style>
</head>
<body>
   <h3> Set the positioning area of the background image using <i>
   content-box property </i> </h3>
   <button onclick="myFunction()"> Set area of background
   image</button>
   <div id="box">
      This is demo text.
   </div>
   <script>
      function myFunction() {
         document.getElementById("box").style.backgroundOrigin="content-box";
      }
   </script>
</body>
</html>

使用 `backgroundOrigin` 的 `padding-box` 属性

`backgroundOrigin` 属性指示背景的定位区域，即 `background-image` 属性提供的图片的原点位置。

`padding-box` 属性指定背景延伸到填充的外边缘。在边框下方不绘制背景。这是默认选项。`border-box` 属性指定背景延伸到边框外边缘。背景绘制在边框下方。

此 `background-origin` 属性的初始值设置为其默认值。“inherit”属性指定相关元素继承其父元素的 `background-origin` 属性。

语法

document.getElementById("box").style.backgroundOrigin = "padding-box";

使用 `getElementById()` 方法获取盒子，`padding-box` 属性提供盒子的 `background-origin`。

示例

在这个示例中，我们创建了一个包含边框、填充、宽度、高度和背景颜色的盒子。盒子内包含一些文本形式的数据。该盒子包含一张图片，其放置区域指定为 `border-box` 属性。此属性修改为 `background-origin` 属性的 `padding-box` 属性。这张图片的放置使得它覆盖了盒子的边框。但是，应用 `padding-box` 属性后，图片被重新定位到包含盒子填充的区域，忽略了边框。

<html>
<head>
<style>
   #box {
      border: 3px dashed red;
      padding: 35px;
      width: 500px;
      height: 260px;
      background:
      url('https://tutorialspoint.com/videotutorials/images/coding_ground_home.jpg') no-repeat;
      background-color: yellow;
      background-origin: border-box;
   }
</style>
</head>
<body>
   <h3> Set the positioning area of the background image using <i>
   padding-box property </i> </h3>
   <button onclick="myFunction()"> Set area of background
   image</button>
   <div id="box">
      This is a demo text.
   </div>
   <script>
      function myFunction() {
         document.getElementById("box").style.backgroundOrigin="padding-box";
      }
   </script>
</body>
</html>

在本教程中，我们学习了如何使用 JavaScript 和 `background-origin` 的 `content-box` 属性和 `padding-box` 属性来设置背景图片的定位区域。

更新于：2022年11月22日

浏览量：386

开启你的职业生涯

完成课程获得认证

开始学习
广告