DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS3基礎 >> 8.5 CSS3多背景圖片
8.5 CSS3多背景圖片
編輯:CSS3基礎     

一、CSS3多背景圖片簡介

CSS3多背景圖片,也就是CSS2中的background屬性外加origin、clip和size組成的新background的多次疊加,縮寫時使用英文逗號隔開每組值。

舉例:為body元素設置兩張背景圖片

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3多背景圖片</title>
    <style type="text/css">
        div
        {
            width:400px;
            height:200px;
            border:1px solid silver;
            background:url("../App_images/lesson/run_css3/frame1.png") bottom left no-repeat,
                       url("../App_images/lesson/run_css3/frame2.png") top right no-repeat;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在浏覽器預覽效果如下:

分析:

這裡使用以下2張圖片作為背景圖片:

背景圖片1

背景圖片2

這裡使用 CSS3多背景圖片,可以使得左下角一個圖片,右上角一個圖片。

 
background:url("../App_images/lesson/run_css3/frame1.png") bottom left no-repeat,
           url("../App_images/lesson/run_css3/frame2.png") top right no-repeat;

其中background屬性是一個復合屬性,因此上述代碼等價於下述代碼:

 
background:url("../App_images/lesson/run_css3/frame1.png"), url("../App_images/lesson/run_css3/frame2.png");
background-position: bottom left, top right;
background-repeat:no-repeat,no-repeat;

很多時候不建議定義多背景圖片,直接使用PS制作一張復合圖就行。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved