无涯教程网

关注我们

CSS - 背景属性

CSS - 背景属性

本章教您如何设置各种HTML元素的背景。您可以设置元素的以下背景属性-

background-color - 背景颜色。
background-image - 背景图片。
background-repeat - 设置背景图像是否及重复。
background-position - 设置背景图像的起始位置。
background-attachment - 背景图像是否固定或者随着页面的其余部分滚动。
background - 简写属性，作用是将背景属性设置在一个声明中。

背景颜色(background-color)

设置元素的背景颜色，下面的示例演示了如何设置元素的背景颜色。

<html>
   <head>
   </head>

   <body>
      <p style="background-color:yellow;">
         This text has a yellow background color.
      </p>
   </body>
</html>

这将产生以下输出-

背景图像(background-image)

把图像设置为背景，无涯教程可以通过调用本地存储的图像来设置背景图像，如下所示:

<html>
   <head>
      <style>
         body  {
            background-image: url("/css/images/css.jpg");
            background-color: #cccccc;
         }
      </style>
   </head>
   
   <body>
      <h1>Hello World!</h1>
   </body>
<html>

它将产生以下输出-

无涯教程网

链接：https://www.learnfk.comhttps://www.learnfk.com/css/css-backgrounds.html

来源：LearnFk无涯教程网

重复背景图像(background-repeat)

设置背景图像是否及如何重复，如果您不想重复图像，可以对 background-repeat 属性使用 no-repeat 值，在这种情况下，图像将仅显示一次。

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat;
         }
      </style>
   </head>

   <body>
      <p>Learnfk point</p>
   </body>
</html>

它将产生以下输出-

无涯教程网

链接：https://www.learnfk.comhttps://www.learnfk.com/css/css-backgrounds.html

来源：LearnFk无涯教程网

下面的示例演示如何垂直重复背景图像。

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-y;
         }
      </style>
   </head>

   <body>
      <p>Learnfk point</p>
   </body>
</html>

它将产生以下输出-

无涯教程网

链接：https://www.learnfk.comhttps://www.learnfk.com/css/css-backgrounds.html

来源：LearnFk无涯教程网

下面的示例演示如何水平重复背景图像。

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-x;
         }
      </style>
   </head>
   
   <body>
      <p>Learnfk point</p>
   </body>
</html>

它将产生以下输出-

无涯教程网

链接：https://www.learnfk.comhttps://www.learnfk.com/css/css-backgrounds.html

来源：LearnFk无涯教程网

背景图像位置(background-position)

设置背景图像的起始位置，下面的示例演示如何将背景图像位置设置为离左侧100像素。

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px;
         }
      </style>
   </head>

   <body>
      <p>Learnfk point</p>
   </body>
</html>

它将产生以下输出-

无涯教程网

链接：https://www.learnfk.comhttps://www.learnfk.com/css/css-backgrounds.html

来源：LearnFk无涯教程网

下面的示例演示如何将背景图像的位置设置为距左侧100像素，距顶部200像素。

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px 200px;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

它将产生以下输出-

无涯教程网

链接：https://www.learnfk.comhttps://www.learnfk.com/css/css-backgrounds.html

来源：LearnFk无涯教程网

背景关联(background-attachment)

下面的示例演示如何设置固定的背景图像。

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
         }
      </style>
   </head>

   <body>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
   </body>
</html>

它将产生以下输出-

无涯教程网

链接：https://www.learnfk.comhttps://www.learnfk.com/css/css-backgrounds.html

来源：LearnFk无涯教程网

下面的示例演示如何设置滚动背景图像。

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-attachment:scroll;
         }
      </style>
   </head>

   <body>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
   </body>
</html>

它将产生以下输出-

无涯教程网

链接：https://www.learnfk.comhttps://www.learnfk.com/css/css-backgrounds.html

来源：LearnFk无涯教程网

作用是将背景属性设置在一个声明中，您可以使用 background 属性立即设置所有背景属性。例如-

<p style="background:url(/images/pattern1.gif) repeat fixed;">
   This parapgraph has fixed repeated background image.
</p>

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

数据分析实战45讲 -〔陈旸〕

Spring Boot与Kubernetes云原生微服务实践 -〔杨波〕

设计模式之美 -〔王争〕

乔新亮的CTO成长复盘 -〔乔新亮〕

Spring Cloud 微服务项目实战 -〔姚秋辰（姚半仙）〕

自动化测试高手课 -〔柳胜〕

说透元宇宙 -〔方军〕

超级访谈：对话玉伯 -〔玉伯〕

大型Android系统重构实战 -〔黄俊彬〕

好记忆不如烂笔头。留下您的足迹吧 :)