内容

• 踩
• 方法1之4：设置纯色背景色
• 方法2之4：使用图片作为背景
• 方法3之4：创建渐变背景
• 方法4之4：将彩色动画设置为墙纸

为了能够以HTML设置网页的背景，您只需要在 样式> /样式> 标签。步骤取决于您希望墙纸的外观。了解如何将网站背景设置为纯色，图像，渐变或彩色动画。

踩

方法1之4：设置纯色背景色

1. 在您喜欢的文本编辑器中打开HTML文件。 从HTML5开始，不再支持HTML属性bgcolor>。就像页面上所有其他样式一样，背景颜色也必须使用CSS设置。
2. 添加 样式> /样式> 标记您的文档。 页面的所有样式数据（包括背景色）都应在这些标记中进行编码。你有吗 样式> 标签已指示，那么您只需滚动到文件的该部分即可。

   DOCTYPE html> html> head> style> / style> / head> / html>

3. 在“ 样式> /样式> 标签。 您在CSS中对“ body”元素所做的任何更改都会影响整个页面。

   DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. 将“ background-color”属性添加到“ body”元素。 在这种情况下，只能使用一种拼写的“颜色”（而不是颜色）。

   DOCTYPE html> html> head> style> body {background-color：} / style> / head> body> / body> / html>

5. 将所需的背景色放在“背景色”后面。 现在，您可以指示颜色的名称（绿色, 蓝色的, 编等），请使用十六进制（十六进制）代码（例如 #000000 对于黑色， ＃ff0000 代表红色等）或输入颜色的RGB值（例如 RGB（255,255,0） 黄色）。下面是带有十六进制代码的示例，使背景与WikiHow标语相同：

   DOCTYPE html> html> head> style> body {background-color：＃93B874; } / style> / head> body> / body> / html>

   • 白色的： #FFFFFF
   • 浅粉红色： ＃FFCCE6
   • 烧Si色： #993300
   • 靛蓝- ＃4B0082
   • 紫罗兰色- ＃EE82EE
   • 查看w3schools.com HTML颜色选择器，以找到所需颜色的十六进制代码。
6. 使用“背景色”将背景色应用于其他元素。 就像设置body元素一样，您可以使用background-color设置其他元素的背景。只需将这些元素放在 样式> /样式> 带有background-color属性。

   DOCTYPE html> html> head> style> body {background-color：＃93B874; } h1 {background-color：orange; } p {background-color：rgb（255,0,0）; } / style> / head> body> h1>此标头获得橙色背景/ h1> p>此段获得红色背景/ p> / body> / html>

方法2之4：使用图片作为背景

1. 在文本编辑器中打开HTML文件。 许多人更喜欢将图像用作其网站的背景。使用此功能，您可以将图案，纹理，照片或任何其他图像设置为背景。从HTML5开始，所有背景都必须使用CSS（级联样式表）进行设置， 样式> /样式> 标签。
2. 添加 样式> /样式> 标记到您的HTML文件中。 您页面的所有样式数据（包括背景色）都应在这些标记中指明。你有没有 样式> 标签集，滚动到文件的该部分。

   DOCTYPE html> html> head> style> / style> / head> / html>

3. 在“ 样式> /样式> 标签。 您在CSS中对“ body”元素所做的任何更改都会影响整个页面。

   DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. 将“背景图像”属性添加到“ body”元素。 添加此属性时，您将需要图像的文件名。确保图像与html文件保存在同一文件夹中（或将文件的完整路径添加到Web服务器）。

   DOCTYPE html> html> head> style> body {background-image：url（“ imagename.png”）;背景颜色：＃93B874; } / style> / head> body> / body> / html>

   • 包含代码是一个好主意 背景颜色 以防万一背景图片无法加载。
5. 分层多个图像。 您可以将多个图像堆叠在一起。如果您有透明背景的图像在叠加时会相互补充，这将很有用。

   DOCTYPE html> html> head> style> body {background-image：url（“ image1.png”），url（“ image2.gif”）;背景颜色：＃93B874; } / style> / head> body> / body> / html>

   • 第一张图片在最上面。第二张图片在第一张图片下方。

方法3之4：创建渐变背景

1. 使用CSS创建渐变背景。 如果您要寻找比纯色更具风格化的东西，但又不如彩色动画那么忙，请尝试使用渐变背景。渐变是可以更改为其他均等色的颜色。您可以使用CSS创建和调整渐变。在开始创建颜色渐变之前，您应该对使用CSS格式化网页的基础知识有足够的了解。
2. 了解标准语法。 创建渐变时，您将需要两条信息：起点和起点角度，以及过渡之间将发生的颜色。您可以选择全部重叠的多种颜色，还可以指定渐变的方向或角度。

   背景：线性渐变（方向/角度，color1，color2，color3等）；

3. 创建一个垂直渐变。 如果您未指定方向，则颜色将从上到下排列。不同的浏览器具有不同版本的渐变函数，因此您将需要添加不同版本的代码。

   DOCTYPE html> html> head> style> html {min-height：100％; / *这是确保渐变跨越整个页面的必要条件。* *}正文{background：-webkit-linear-gradient（＃93B874，＃C9DCB9）; / * Chrome 10 +，Safari 5.1+ * /背景：-o-linear-gradient（＃93B874，＃C9DCB9）； / * Opera 11.1+ * /背景：-moz-linear-gradient（＃93B874，＃C9DCB9）； / * Firefox 3.6+ * /背景：线性渐变（＃93B874，＃C9DCB9）； / *默认语法（必须为最后） * / background-color：＃93B874; / *最好设置背景色，以防不加载渐变 * /} / style> / head> body> / body> / html>

4. 创建具有方向的渐变。 向渐变添加方向可以使您调整颜色转换的方式。请注意，不同的浏览器对路线的解释会有所不同。它们都将显示相同的颜色渐变。

   DOCTYPE html> html> head> style> html {min-height：100％; } body {background：-webkit-linear-gradient（left，＃93B874，＃C9DCB9）; / *从左到右 * /背景：-o-linear-gradient（右，＃93B874，＃C9DCB9）； / *结尾在右边 * /背景：-moz-linear-gradient（右边，＃93B874，＃C9DCB9）； / *在右侧结束 * /背景：线性渐变（向右＃93B874，＃C9DCB9）； / *移到右侧 * /背景颜色：＃93B874; / *最好设置背景色，以防渐变不加载 * /} /样式> / head> body> / body> / html>

5. 使用其他属性来调整渐变。 您可以使用渐变做更多的事情。
   • 例如，您不仅可以使用两种以上的颜色，还可以在每种颜色后面放置一个百分比。使用此按钮，您可以指示每个颜色段将获得多少空间。

     背景：线性渐变（＃93B874 10％，＃C9DCB9 70％，＃000000 90％）;

   • 为颜色添加透明度。有了它，您可以淡出颜色。使用相同的颜色从该颜色消失为无。您会喜欢的功能 rgba（） 必须使用以指示颜色。最终值确定透明度： 0 用于不透明和 1 为透明。

     背景：线性渐变（向右，RGBA（147,184,116.0），RGBA（147,184,116.1））；

方法4之4：将彩色动画设置为墙纸

1. 导航 样式> 在您的HTML代码中。 如果您发现纯色背景颜色，但找不到，请尝试更改颜色背景。从HTML 5开始，必须使用CSS（级联样式表）定义背景色。如果您从未使用CSS设置背景色，请在尝试使用此方法之前阅读有关设置背景色的部分。
2. 添加属性 动画片 到“身体”元素。 您将必须添加2个不同的属性，因为每个浏览器需要不同的代码。

   DOCTYPE html> html> head> style> body {-webkit-animation：colorchange 60s infinite;动画：换色60年代无限； } / style> / head> body> / body> / html>

   • -webkit-animation 该属性对于基于Chrome的浏览器（Chrome，Opera，Safari）是必需的。 动画片 是所有其他浏览器的标准。
   • 颜色变化 在此示例中称为动画。
   • 60多岁 是动画/过渡的持续时间（60秒）。确保同时为Webkit和默认语法设置此设置。
   • 无穷 指示动画应无限期重复。如果您希望循环显示颜色然后停在最后一种颜色，则可以省略此部分。
3. 为动画添加颜色。 现在，您将使用@keyframes规则设置要通过的背景颜色，以及每种颜色在页面上可见的时间。同样，您将不得不为各种浏览器添加多种编码。

   DOCTYPE html> html> head> style> body {-webkit-animation：colorchange 60s infinite;动画：换色60年代无限； } @ -webkit-keyframes colorchange {0％{background：＃33FFF3;} 25％{background：＃78281F;} 50％{background：＃117A65;} 75％{background：＃DC7633;} 100％{background：＃ 9B59B6;}} @keyframes颜色变化{0％{background：＃33FFF3;} 25％{background：＃78281F;} 50％{background：＃117A65;} 75％{background：＃DC7633;} 100％{background：＃ 9B59B6;}} /样式> /头>正文> /正文> / html>

   • 请注意，这两行（@ -webkit-keyframes 和 @keyframes 具有相同的背景色和百分比值。它应保持统一，以便所有浏览器的体验均相同。
   • 百分比（0%, 25%等）表示动画的总时长（60多岁）。页面加载时，背景颜色将设置为 0% 和 （＃33FFF3）。播放25％或60秒的动画后，背景将转换为 ＃78281F， 等等。
   • 您可以根据需要调整持续时间和颜色。