返回首页
当前位置: 主页 > 编程语言 > CSS教程 >

CSS-背景

时间:2020-04-25 14:35来源:电脑教程学习网 www.etwiki.cn 编辑:小山哥

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

  • 背景颜色属性被用于设置一个元素的背景颜色。

  • 背景图像属性用于设置一个元素的背景图像。

  • 背景重复特性被用于控制在背景图像的重复。

  • 背景位置属性用于控制图像的背景中的位置。

  • 背景附件属性被用于控制在背景图像的滚动。

  • 背景属性被用作速记指定数目的其他背景属性。

设置背景色

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

现场演示
<html>
   <head>
   </head>

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

这将产生以下结果-

设置背景图片

我们可以通过调用本地存储的图像来设置背景图像,如下所示:

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

它将产生以下结果-

重复背景图片

下面的示例演示了如果图像很小,如何重复背景图像。如果您不想重复图像,则可以将no-repeat值用于background-repeat属性,在这种情况下,图像将仅显示一次。

默认情况下background-repeat属性将具有重复值。

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

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

它将产生以下结果-

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

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

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

它将产生以下结果-

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

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

它将产生以下结果-

设置背景图像位置

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

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

   <body>
      <p>Tutorials 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>

它将产生以下结果-

设置背景附件

背景附件确定背景图像是固定的还是随页面的其余部分滚动。

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

现场演示
<!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>

它将产生以下结果-

速记财产

您可以使用背景属性一次设置所有的背景属性。例如-

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

------分隔线----------------------------
标签(Tag):
------分隔线----------------------------
推荐内容
  • CSS-字体

    本章教您如何设置HTML元素中可用的内容字体。 您可以设置元素的以下字体属性- 该 FONT...

  • CSS-背景

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

  • CSS-语法

    CSS由样式规则组成,这些样式规则由浏览器解释,然后应用于文档中的相应元素。 样式规...

  • 什么是CSS?

    ascading tyle 小号 heets,被亲切地称为CSS,是一个简单的设计语言旨在简化制作网页...

  • css实现 横排二级下拉菜单

    !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR...

  • CSS加载外部字体,让网站更显个性

    一般网站上的字体,都是加载电脑本地的,如果想要在网站上使用一种比较不常见的字体,...

猜你感兴趣