整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
SS 背景属性用于定义HTML元素的背景。
CSS 属性定义背景效果:
background-color
background-image
background-repeat
background-attachment
background-position
背景颜色
background-color 属性定义了元素的背景颜色.
页面的背景颜色使用在body的选择器中:
实例
body {background-color:#b0c4de;}
CSS中，颜色值通常以以下方式定义:
十六进制 - 如："#ff0000"
RGB - 如："rgb(255,0,0)"
颜色名称 - 如："red"
以下实例中, h1, p, 和 div 元素拥有不同的背景颜色:
实例
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
背景图像
background-image 属性描述了元素的背景图像.
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
页面背景图片设置实例:
实例
body {background-image:url('paper.gif');}
尝试一下 »
下面是一个例子是一个糟糕的文字和背景图像组合。文本可读性差:
实例
body {background-image:url('bgdesert.jpg');}
背景图像 - 水平或垂直平铺
默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。
一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如下所示:
实例
body
{
background-image:url('gradient2.png');
}
如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:
实例
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
背景图像- 设置定位与不平铺
让背景图像不影响文本的排版
如果你不想让图像平铺，你可以使用 background-repeat 属性:
实例
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。
可以利用 background-position 属性改变图像在背景中的位置:
实例
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
背景- 简写属性
在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。
为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 "background":
实例
body {background:#ffffff url('img_tree.png') no-repeat right top;}
尝试一下 »
当使用简写属性时，属性值的顺序为：:
background-color
background-image
background-repeat
background-attachment
background-position
以上属性无需全部使用，你可以按照页面的实际需要使用.
这个实例使用了先前介绍的CSS，你可以查看相应实例: CSS 实例
更多实例
如何设置固定的背景图像
本例演示如何设置固定的背景图像。图像不会随着页面的其他部分滚动。
CSS 背景属性
| Property | 描述 |
|---|---|
| background | 简写属性，作用是将背景属性设置在一个声明中。 |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
| background-color | 设置元素的背景颜色。 |
| background-image | 把图像设置为背景。 |
| background-position | 设置背景图像的起始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
<!DOCTYPE html>
<html>
<head>
<title>html5添加音乐</title>
<meta charset="utf-8">
<!--embed标签写在<head>里面的title标签下-->
<embed src="C:\Users\Administrator\Desktop\告白气球.mp3" hidden="flase" autostart="true" loop="true">
<!-- 说明：
1、src：文件路径。
2、hidden="true"表示隐藏音乐播放按钮，相反使用hidden="false"表示开启音乐播放按钮。
3、autostart="true" 表示是打开网页加载完后自动播放。
4、loop="true"表示 循环播放 如仅想播放一次则为：loop="false" -->
</head>
<body>
<audio autoplay="autoplay" loop="loop" preload="auto" controls="controls"
src="C:\Users\Administrator\Desktop\告白气球.mp3">
</audio>
<!-- 说明：
1、autoplay="autoplay"，则背景音乐将在音网页打开后就自动马上播放。
2、controls="controls"，则为了在页面内显示显示控件，如播放按钮。
3、"loop="loop"，则是为了使背景音乐重复播放。
4、preload="auto"，则音频在页面加载的同时进行加载，并预备播放。
5、src=""，即是在""内加入背景音乐的保存路径，如：src=""。
注：若是想播放按钮隐藏，则使用以下语句：
直接使用css 的display控制audio标签的显示： -->
<style type="text/css">
audio{
display: none;
}
</style>
</body>
</html>为Web开发人员，最常见的事情之一就是更改HTML元素的背景颜色。但是，如果您不了解如何使用CSS background-color属性，可能会产生混淆。在本文中，我们讨论以下几点
1.HTML元素的默认背景色值
2.如何更改div的背景颜色，这是非常常见的元素
3.该background-color属性会影响CSS盒子模型的哪些部分，以及
4.此属性可以采用的不同值。
div的默认背景颜色是transparent。因此，如果您不指定div的背景色，它将显示其父元素的背景色。
在此示例中，我们将更改以下div的背景颜色。
<div class="div-1"> I love HTML </div>
<div class="div-2"> I love CSS </div>
<div class="div-3"> I love JavaScript </div>没有任何样式，它将在视觉上转换为以下内容。
让我们通过向类中添加样式来更改div的背景颜色。您可以通过尝试HTML文件中的示例进行操作。
<style>
.div-1 {
background-color: #EBEBEB;
}
.div-2 {
background-color: #ABBAEA;
}
.div-3 {
background-color: #FBD603;
}
</style>
<body>
<div class="div-1"> I love HTML </div>
<div class="div-2"> I love CSS </div>
<div class="div-3"> I love JavaScript </div>
</body>这将导致以下结果：
看！我们已成功更改了该div的背景颜色。接下来，让我们更多地了解此属性。让我们看看background-color属性如何影响CSS-box模型的各个部分。
根据CSS框模型，所有HTML元素都可以建模为矩形框。每个盒子由4个部分组成，如下图所示。
如果您不熟悉Box模型，则可以查阅相关资料。问题是，当您更改div的背景颜色时，Box模型的哪一部分会受到影响？简单的答案是填充区域和内容区域。让我们通过一个例子来确认这一点。
<style>
body {
background-color: #ABBAEA;
}
div {
height: 200px;
margin: 20px;
border: 5px solid;
background-color: #FBD603;
}
</style>
<body>
<div>
<p>This is the parent div which contains the div we are testing</p>
<div>
<p>This example shows that changing the background color of a div does not affect the border and margin of the div.</p>
</div>
</div>
</body>这将导致：
从上面的示例中，我们可以看到空白区域和边框区域不受背景颜色变化的影响。我们可以使用border-color属性更改边框的颜色。边距区域保持透明，并反映父容器的背景色。
最后，让我们讨论background-color属性可以采用的值。
就像color属性一样，background-color属性可以采用六个不同的值。让我们通过一个示例考虑三个最常见的值。在示例中，我们将div的背景色设置为具有不同值的红色。
<style>
/* Keyword value/name of color */
.div-1 {
background-color: red;
}
/* Hexadecimal value */
.div-2 {
background-color: #FF0000;
}
/* RGB value */
.div-3 {
background-color: rgb(255,0,0);
}
</style>
<body>
<div class="div-1">
<p>The background property can take six different values.</p>
</div>
<div class="div-2">
<p>The background property can take six different values.</p>
</div>
<div class="div-3">
<p>The background property can take six different values.</p>
</div>
</body>注意，它们的结果都是相同的背景色。
该background-color属性可以采用的其他值包括HSL值，特殊关键字值和全局值。这是每个例子。
/* HSL value */
background-color: hsl(0, 100%, 25%;
/* Special keyword values */
background-color: currentcolor;
background-color: transparent;
/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;设置元素的背景色时，重要的是要确保背景色和其包含的文本颜色的对比度足够高。这是为了确保弱视人士可以轻松阅读文本。
第一个div的背景颜色与文本颜色之间的对比度不够高，每个人都看不到。因此，除非您是唯一正在使用的网站，并且您的视力非常好，否则应避免这种颜色组合。
第二个div在背景颜色和文本颜色之间具有更好的对比度。因此，它使人们更容易阅读和阅读。
在本文中，我们看到了如何更改div的背景颜色。我们还讨论了CSS Box模型的哪些部分受背景颜色变化的影响。最后，我们讨论了background-color属性可以采用的值。
希望本文对您有所帮助。谢谢阅读。
*请认真填写需求信息，我们会在24小时内与您取得联系。
