HTML DOM Style background属性用法及代码示例

background 属性用于设置或获取与元素关联的背景图像。它是一个速记属性，最多可以操作 8 个属性。

用法

以下是语法 -

设置背景属性 -

object.style.background = "color image repeat attachment position size origin clip|initial|inherit"

值

以下是值 -

Sr.No	值和描述
1	color 用于设置元素背景颜色。
2	image 用于设置元素背景图像。
3	repeat 用于设置背景图像的重复方式。
4	attachment 用于将背景图像设置为固定或随页面滚动。
5	position 用于设置背景图像的起始位置。
6	size 用于设置背景图像大小。
7	origin 用于指定背景定位区域。
8	clip 用于设置背景图像的绘制距离。

示例

让我们看一个背景属性的例子 -

<!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>

输出

这将产生以下输出 -

单击更改背景图像 -

相关用法

注：本文由纯净天空筛选整理自AmitDiwan大神的英文原创作品 HTML DOM Style background Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。