上一节:
下一节:

  CSS 背景

  • CSS多个背景

    CSS允许您通过background-image属性为元素添加多个背景图像 。不同的背景图像用逗号分隔，并且图像堆叠在彼此之上，其中第一图像最接近观察者。以下示例有两个背景图像，第一个图像是一朵花（与底部和右边对齐），第二个图像是纸张背景（与左上角对齐）： 
    #example1 {
     background-image: url(img_flwr.gif), url(paper.gif);
     background-position: right bottom, left top;
     background-repeat: no-repeat, repeat;
   }
    尝试一下
    可以使用单个背景属性background简写属性指定多个背景图像。以下示例使用background简写属性（与上面的示例相同）： 
    #example1 {
     background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
   }
    尝试一下

  • CSS背景大小

    CSS background-size属性允许您指定背景图像的大小。可以使用长度，百分比或使用以下两个关键字之一指定大小：contains或cover。以下示例将背景图像的大小调整为远小于原始图像（使用像素）： 
    #div1 {
   background: url(img_flower.jpg);
   background-size: 100px 80px;
   background-repeat: no-repeat;
 }
    尝试一下
    background-size其他两个可能的值是contain和cover。contain关键字缩放的背景图像是尽可能的大（但它的宽度和高度二者必须适合在内容区域内）。这样，根据背景图像和背景定位区域的比例，背景中可能存在一些未被背景图像覆盖的区域。cover关键字缩放背景图像，使得所述内容区域由背景图像完全覆盖（其宽度和高度两者都等于或超过所述内容区域）。因此，背景图像的某些部分可能在背景定位区域中不可见。以下示例说明了使用contain和cover： 
    #div1 {
   background: url(img_flower.jpg);
   background-size: contain;
   background-repeat: no-repeat;
 }
 #div2 {
   background: url(img_flower.jpg);
   background-size: cover;
   background-repeat: no-repeat;
 }
    尝试一下

  • 定义多个背景图像的大小

    background-size在处理多个背景时，该属性还接受多个背景大小值（使用逗号分隔列表）。以下示例指定了三个背景图像，每个图像具有不同的背景大小值： 
    #example1 {
     background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
     background-size: 50px, 130px, auto;
   }
    尝试一下

  • 全尺寸背景图像

    现在我们希望在网站上有一个背景图像，它始终覆盖整个浏览器窗口。要求如下：
    • 用图像填充整个页面（无空格）
    • 根据需要缩放图像
    • 中心图像在页面上
    • 不要导致滚动条
    以下示例显示了如何执行此操作; 使用<html>元素（<html>元素始终至少是浏览器窗口的高度）。然后在其上设置固定且居中的背景。然后使用background-size属性调整其大小： 
    html {
     background: url(/images/background.jpg) no-repeat center fixed; 
     background-size: cover;
   }
    尝试一下

  • 英雄形象

    您还可以在<div>上使用不同的背景属性来创建英雄图像（带有文本的大图像），并将其放置在您想要的位置。 
    .hero-image {
     background: url(img_man.jpg) no-repeat center; 
     background-size: cover;
     height: 500px;
     position: relative;
   }
    尝试一下

  • CSS background-origin属性

    CSS background-origin属性指定背景图像的位置。 该属性有三个不同的值：
    • border-box - 背景图像从边框的左上角开始
    • padding-box - （默认）背景图像从填充边缘的左上角开始
    • content-box - 背景图片从内容的左上角开始
    以下示例说明了background-origin属性： 
    #example1 {
     border: 10px solid black;
     padding: 35px;
     background: url(img_flwr.gif);
     background-repeat: no-repeat;
     background-origin: content-box;
   }
    尝试一下

  • CSS background-clip属性

    CSS background-clip属性指定背景的绘画区域。 该属性有三个不同的值：
    • border-box - （默认）将背景绘制到边框的外边缘
    • padding-box - 将背景绘制到填充的外边缘
    • content-box - 在内容框中绘制背景
    以下示例说明了background-clip属性： 
    #example1 {
     border: 10px dotted black;
     padding: 35px;
     background: yellow;
     background-clip: content-box;
   }
    尝试一下

  • CSS高级背景属性

    属性 描述
    background 在一个声明中设置所有背景属性的简写属性
    background-clip 指定背景的绘制区域
    background-image 为元素指定一个或多个背景图像
    background-origin 指定背景图像的位置
    background-size 指定背景图像的大小

  • 相关页面

    HTML教程：HTML样式
上一节:
下一节: