无涯教程网

关注我们

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>

它将产生以下输出-

重复背景图像(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>

它将产生以下输出-

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

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

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

它将产生以下输出-

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

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

它将产生以下输出-

背景图像位置(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>

它将产生以下输出-

下面的示例演示如何将背景图像的位置设置为距左侧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>

它将产生以下输出-

背景关联(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>

它将产生以下输出-

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

<!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>

它将产生以下输出-

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

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

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

技术教程推荐

如何设计一个秒杀系统 -〔许令波〕

零基础学Java -〔臧萌〕

Linux实战技能100讲 -〔尹会生〕

编辑训练营 -〔总编室〕

后端技术面试 38 讲 -〔李智慧〕

性能测试实战30讲 -〔高楼〕

技术管理案例课 -〔许健〕

说透元宇宙 -〔方军〕

AI大模型之美 -〔徐文浩〕

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