我们学习CSS背景属性。假设这里有一个div容器，宽400，高300。默认情况下，这个div是没有背景的，或者它的背景是透明的。我们可以看到这个div在默认情况下，背景是透明的。也可以为div添加背景颜色。既然可以设置背景色，当然也可以给这个div设计一个背景图，像这样。但是由于这个div的大小已经被我设置好了，所以图片比这个容器要大，所以其实我们最终看到的效果是这样的。我们只能看到部分图片。让我们看看如何通过应用CSS背景属性来实现这种效果。创建一个css-background.html文件和一个background-style.css文件。接下来，我们要为整个页面添加背景图像。其实body元素也是一个容器，可以直接给body添加背景图片。body容器默认在水平方向占据整个窗口。让我们为其添加一个高度样式，定义选择器主体，并声明样式高度：100%。CSSbody{height:100%;}预览效果，按F12，观察页面body元素的大小。我们发现body仍然只有宽度而没有高度。为什么我们设置为100%的高度不起作用？请注意，这里的100%是相对于其父元素的高度。body元素的父元素是html，我们还没有给这个元素设置大小。因此，在body选择器之前加上一个html逗号(html,)，以便两个元素都设置了高度。保持它们的高度与浏览器窗口大小相同。这时候再看页面，现在正文和整个窗口一样大。CSShtml,body{height:100%;}接下来我们给body添加一张背景图片，可以通过background-image属性来实现。属性值是url后跟一个小括号，小括号里填的是背景图片的路径（url(./duck.gif)）。回到样式代码，定义一个body选择器，单独为其声明样式background-image:url(./duck.gif)。此图为动态图。来看看效果，怎么这么多图？我显然只是添加了一个背景图像。原因是当我们给元素添加背景图片时，图片是平铺显示的。什么是平铺？也就是说，当我们放入一张背景图片时，默认情况下，这张图片会四处扩散，无限重复，就变成了这个样子。当然，容器的大小是有限的，最终我们能看到的也就这么多。如果我们不希望这个背景图片重复，我们需要使用一个新的背景属性background-repeat，其值为no-repeat。看看效果，最后只有一个动画。接下来，让我们对其进行修改，将背景图片替换为另一张图片。我们再观察一下这个效果。由于不允许平铺，我们只能看到一张图片。将background-repeat属性值从no-repeat更改为repeat。我们已经看到了这种效果。在平时的开发中，给网页或者比较大的容器设置背景的时候，经常会用到这样的技巧，在里面放一张小图，我只要保持平铺，就会得到无限大的图片。图表。回到前面的例子。如果要求背景图显示在页面中间，我们如何调整背景图的位置呢？我们需要用到background-position属性，这个属性需要写入两个值：第一个值表示水平方向的对齐方式——左、中、右。第二个值表示垂直方向的对齐方式——顶部、中心、底部。添加样式background-position:centercentertobody，即水平和垂直居中。我们发现图片移动到了页面中间。如果图片放在右下角，属性值应该怎么设置？将答案写在公共屏幕上。回到html代码，添加一个h1元素和五个p元素，并填写一些文本。再复印五份。回到css代码，背景图片恢复为bg.png，图片平铺方式repeat。让我们来看看效果。您可以通过滚动条查看网页内容。仔细观察文本和背景图像一起滚动。文字可以滚动，背景图片不能动吗？大家可以先想象一下效果。要实现这种效果，需要使用background-attachment属性声明容器中背景图片和内容的附着方式。valuefixed：图片固定，valuescroll：同时滚动。添加样式background-attachment[??t?t?m?nt]到正文选择器：已修复。再看效果，滚动页面，实现了固定背景的效果！之前我们多次使用过background-color属性，它可以设置容器的背景颜色，值可以设置为颜色名称、十六进制颜色值、RGB颜色值等。注释掉背景图片的样式，添加background-color属性，值为绿色。此时，整个页面背景都是绿色的！颜色有点深，能把绿色改浅一点吗？你能想到的方法应该是换一个颜色值。其实我们也可以通过让背景透明来实现这种效果。这就需要学习一种新的颜色值表示方法——rgba。这里的rgb是rgb颜色值，a是alpha的缩写，意思是通过设置一个alpha通道来指定颜色的不透明度，它是一个0到1之间的数字。0表示完全透明，1表示完全透明不透明。比如rgba(0,0,0,0.5)，代表的颜色是黑色，半透明。将绿色名称更改为rgba(0,255,0,0.1)。大家看看，因为页面的绿色背景是透明的，所以颜色变淡了！为了缩短代码，也可以使用单个背景来指定所有背景属性。您可以将正文的所有背景属性组合到一个背景属性中。注释所有代码，声明属性background，值可以写为：颜色值rgba(0,255,0,0.1)，背景图片url(./duck.gif)，tilingmodeno-repeat，backgroundpositionright底部，固定背景附件。(rgba(0,255,0,0.1)url(./bg.png)no-repeatrightbottomfixed;)看看，一条语句就搞定了所有背景效果！文章配套视频链接：https://www.bilibili.com/video...
