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其他两个可能的值是containcovercontain关键字缩放的背景图像是尽可能的大(但它的宽度和高度二者必须适合在内容区域内)。这样,根据背景图像和背景定位区域的比例,背景中可能存在一些未被背景图像覆盖的区域。cover关键字缩放背景图像,使得所述内容区域由背景图像完全覆盖(其宽度和高度两者都等于或超过所述内容区域)。因此,背景图像的某些部分可能在背景定位区域中不可见。以下示例说明了使用containcover
    #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样式