整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
们学习 CSS 背景属性。
假设这里有个 div 容器，宽 400，高 300，默认情况下，这个 div 是没有背景的，或者说它的背景是透明的，我们拿一张图片实验一下就能看得出来，这个 div 在默认情况下，背景是透明的。
也可以给 div 加一个背景颜色。
既然可以设置背景颜色，那么当然也可以给这个 div 设计一个背景图片，就像这样。但是由于这个 div 已经被我设定了大小，图片呢，是大于这个容器的，所以实际上，我们最终看到的效果，是这个样子的。我们只能看到图片的一部分。下面我们就来看看应用 CSS 背景属性如何实现这个效果。
创建一个 css-background.html 文件和一个 background-style.css 文件。接下来，我们打算给整个页面来添加背景图片。
事实上，body 元素也是一个容器，可以直接给 body 添加背景图片。body 容器默认水平方向上，是占满整个窗口的，我们来给它添加一个高度样式，定义选择器 body，声明样式 height: 100%。
CSS
body {
height: 100%;
}预览一下效果，按下 F12，来观察一下页面 body 元素的大小，我们发现 body 依然是只有宽度，没有高度。为什么我们设置的高度 100% 不管用呢？大家注意，这里的100%是相对于它的父元素高度的，body 元素的父元素是 html，这个元素我们并没有给它设置大小。
所以，在 body 选择器前面加一个 html 逗号 ( html, )，这样两个元素都设置了高度。让他们的高度和浏览器窗口大小保持一致。
这时再来看一下页面，现在 body 和整个窗口就一样大了。
CSS
html, 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 属性，这个属性需要写两个值：第一个值表示在水平方向上的对齐方式——left，center，right。第二个值表示在垂直方向上的对齐方式——top，center ，bottom。
给 body 添加样式 background-position: center center，也就是水平垂直居中。
大家发现，图片移到了页面的中间。如果将图片放到右下角，属性值该如何设置呢？把答案写到公屏上吧。
回到 html 代码，添加一个 h1 元素和五个 p 元素，填入一些文本。再复制五份。
再回到 css 代码，背景图恢复为 bg.png，图片平铺方式为 repeat。
我们看一下效果，可以通过滚动条来查看网页内容，仔细观察，文字和背景图片一起滚动。那能否实现文字滚动，背景图片不动呢？大家可以先脑补一下效果。
实现这个效果，需要使用 background-attachment 属性，用来声明容器里的背景图片与内容的依附方式。值 fixed：图片固定，值 scroll：同时滚动。
给 body 选择器添加样式 background-attachment
[??t?t?m?nt] : fixed。
再看一下效果，滚动一下页面，背景固定的效果实现了！
前面我们多次使用到了 background-color 属性，它可以给容器设置背景颜色，值可以设置为颜色名称，十六进制颜色值，RGB颜色值等等。
把背景图片的样式注释掉，添加 background-color 属性，值为 green。
此时，整个页面背景为绿色！颜色有点深，可以让绿色变的浅一些吗？
你能想到的方法应该是换一个其他的颜色值，其实，我们可以通过让背景透明一些，同样可以实现这个效果。
这需要学习一个新的颜色值表示方法——rgba。这里的 rgb 就是 rgb 颜色值，a 是 alpha 的简写，表示通过设置一个 alpha 通道，来指定颜色的不透明度，是一个介于 0 到 1 的数字。0表示完全透明，1 表示完全不透明。比如 rgba(0, 0, 0, 0.5)，表示的颜色就是黑色半透明。
把 green 颜色名称改为 rgba(0, 255, 0, 0.1)。
我们看，页面绿色的背景因为透明，颜色变浅了！
为了缩短代码，也可以使用单一的 background 来指定所有的背景属性。
可以把 body 的全部背景属性，合并在一个 background 属性里。注释所有代码，声明属性 background，值可以写为：颜色值 rgba(0, 255, 0, 0.1)， 背景图片 url(./duck.gif)，平铺方式 no-repeat，背景图位置 right bottom，背景依附 fixed。 （rgba(0, 255, 0, 0.1) url(./bg.png) no-repeat right bottom fixed;）
我们看，一句声明，实现了全部的背景效果！
文章配套视频链接： https://www.bilibili.com/video/BV1oU4y1278g/?p=75
使用CSS设置各种HTML元素的背景，元素的背景有以下属性：
设置背景颜色：
设置背景图像：
设置背景图像沿x轴重复：
设置图像不重复，位于右上角：
设置图像不重复，不随内容滚动：
如果需要指定的图像属性太多时，可采用简写形式，如：
使用背景简写时，属性的指定顺序如下所示：
想给你的网站进行美化吗？一种方法是在你的WordPress页面上添加一个背景图片。毕竟背景图片是放在页面内容后面的图片或设计，以美化页面。如何给WordPress文章和页面添加背景图片？在WordPress网站上添加背景图片有不同的方法。
原文引用：给WordPress文章和页面添加背景图片图文教程 - 搬主题
在本图文教程中，搬主题将介绍三种很容易做到的方法。
简单地说，它们美化了你的网站。相对于在整个网站上使用普通的背景，在你的网站背景上显示一个图像会增加一些美感和专业性。
在过去，人们试图保持他们的网站设计尽可能的简单。虽然这在当时很有效，但后来情况发生了变化。随着全球网站数量的增加，确保你在竞争中脱颖而出是很重要的。实现这一目标的方法之一是改善你的网站设计。使用背景图片就可以为你的WordPress网站做到这一点。
正如一切有优点的事物一样，如果使用不当，也必然会有弊端。下面我们将讨论其中的一些问题。
首先，一些背景图片可能会出现在完全不合适的地方，并扰乱你的页面内容。这将导致用户错过你打算在你的页面上传递的信息。其次，不对移动端负责的背景图片可能会影响你网站的移动可用性。大多数用户从他们的移动设备访问互联网。出于这个原因，作为一个网站所有者，移动友好性应该是你最关心的问题。
最后，如果你使用的是大文件尺寸的图像，这可能会增加你网站的加载时间。因此，加载时间的增加会导致高跳出率，这反过来又会影响你的页面SEO。当然，你可以通过使用图像压缩插件或在上传到你的网站之前简单地在线压缩图像来避免这种情况。
有三种方法可以在WordPress网站上添加背景图片。那就是使用默认的主题选项、使用插件或使用自定义CSS代码。下面，我们将告诉你如何使用它们中的每一个。
一些WordPress主题支持使用图片作为页面的背景。如果你的主题支持它，你可以在你的管理面板上的自定义页面启用它。首先登录到你的WordPress仪表板，然后进入外观>>自定义。这将会出现WordPress主题定制器页面。
在右边，你会看到你的网站的实时预览和最近的变化。左边的面板包含了你的主题所提供的各种自定义功能。要设置背景图片，请点击背景。
在 "背景"菜单上，你可以使用一个图像或颜色作为你的背景。要使用图像，请点击 "选择图像"按钮。
接下来，从你的WordPress媒体库中选择一张图片。要上传一个新的图像，选择 "上传文件 "标签。然后点击 "选择文件"，从你的电脑中选择图像。
将图像上传到你的网站后，点击选择图像按钮。
要改变图像的大小和显示，请点击 "预设 "下拉菜单并从可用的选项中选择。你可以测试每个选项，以确定哪个选项对你的图像效果最好。
在 "图像位置 "下，你可以选择你想要对齐图像的角度。当你完成了对图像的定制后，点击 "发布"来实现这些变化。你可以访问你网站上的任何一个页面，看看背景看起来如何。
使用大多数主题提供的默认背景选项的弊端是它没有提供很大的灵活性和控制背景图片在你的页面上的外观。此外，背景图片是全局性的，适用于你整个网站的帖子和页面。因此，如果你想为其他页面和帖子使用不同的背景，你可能会发现这很困难。幸运的是，有了WordPress的添加背景图片的插件，你在为网站的任何部分或页面添加背景照片时，可以得到很大的控制和灵活性。
如果你的主题设置中没有添加背景图片的选项，你可以使用一个插件来添加它。在本节中，我们将展示如何使用两个插件来做到这一点。
Elementor是WordPress最受欢迎的拖放式页面生成器插件之一。该插件有很多功能，让你使用交互式仪表盘建立一个完整的网站，而不需要写一行代码。
在这里，我们将使用背景功能为WordPress网站上的部分添加背景图片。要开始，你需要从你的WordPress仪表板上安装并激活Elementor插件。
这里可以从搬主题站点下载汉化中文版《Elementor Pro完美汉化中文版|页面拖动自定义设计WordPress插件介绍》
激活该插件后，你可以使用直观的仪表盘来编辑你的WordPress文章和页面。首先，进入页面>>所有页面，然后在你想修改的页面下面选择编辑。
在页面编辑器上，点击 "用Elementor编辑 "按钮，打开仪表板。Elementor仪表板有很多功能，可以帮助你编辑网站的任何部分。你可以在 "内容 "选项卡中添加文本、标题、图片、视频等。
假设我们想在你的页面上的某个部分添加一个背景图片，点击六点图标，突出整个部分，如下图所示。
在 "风格"选项卡上，点击背景下拉菜单。接下来，选择钢笔图标，然后点击选择图像。
现在从你的WordPress媒体库中选择一张图片或上传一张新图片。
添加背景叠加
在选择图像后，你可以添加一个背景覆盖，这样图像就不会扰乱你的内容。为此，点击背景叠加下拉菜单。
然后在 "颜色 "部分选择你要使用的颜色。
当你完成添加图像和效果后，点击更新按钮，保存你的变化。通过这种方法，你可以在网站的任何部分或页面添加无限的背景图片。只需选择页面，然后用Elementor插件编辑，添加你的背景图片。
另一个你可以用来在WordPress中添加背景图片的插件是Advanced WordPress Backgrounds插件。除了添加背景图片外，你还可以使用视频作为你的背景元素。这些视频可以来自你的媒体库、YouTube或Vimeo视频。
还有一些特殊的效果，你可以应用到你的图片上，如视差滚动效果。在这里，我们将专注于添加一个背景图片，但如果你想了解更多关于背景效果的信息，请查看我们关于在WordPress添加视差效果的详细指南。要开始，你需要在你的WordPress仪表板上安装和激活该插件。为此，进入插件>>新增。在搜索框中，输入 "advanced WordPress backgrounds"。接下来，点击立即安装按钮，在安装完成后激活该插件。
要使用这个插件，请进入页面>>所有页面。然后在你想添加背景的页面下面选择编辑。
在编辑器上，点击添加块图标，然后在搜索框中输入 "AWB"。当它出现时，选择背景（AWB）块。
接下来，在右侧选择你想添加的背景类型。你可以使用背景颜色、图像或视频。选择 "图像 "选项卡并点击选择图像。
之后，从你的媒体库中选择一张图片。
你可以分别使用 "尺寸 "和 "背景尺寸 "选项来改变图像和背景的大小。添加图片后，点击 "更新 "按钮，保存你的更改。如果你使用的是经典编辑器，导航到你想添加背景图片的页面或帖子。一旦到达那里，点击高级WordPress背景图标。
在 "常规 "选项卡上，点击背景类型下拉菜单，然后选择图像选项。
接下来，点击选择图像按钮，然后从你的WordPress媒体库中选择一个图像。
你也可以更新图像的大小和位置。如果你想添加一个覆盖层，点击 "覆盖颜色 "下面的 "选择颜色"。接下来，选择你想使用的颜色。
而现在，在自定义背景图片后，点击插入。
这将生成一个短码，并自动将其插入你的编辑器中。在这个简码中，你可以输入你希望在背景图片上显示的文字。一旦完成，点击 "发布/更新 "按钮就可以实现改变。现在你可以在你的网站上查看该页面，看看背景图片的样子。
如果你是技术控，你可以使用自定义CSS代码来为你的网页和文章添加自定义背景。使用自定义CSS可以让你对图像的外观和位置有很大的灵活性和控制。
使用CSS方法，有许多背景图片的位置可供选择。首先，我们可以创建一个全局性的CSS背景图片，它将显示在所有页面上。很像一些WordPress主题所提供的选项。另外，我们可以添加特定类别的背景图片，或者创建一个带有背景图片的CSS类。然后，你可以将该类应用于单个帖子和页面。
*请认真填写需求信息，我们会在24小时内与您取得联系。
