Language

利用CSS3 Multiple Backgrounds 實現多背景效果

pig

• 1 min read

目的：

解決設計圖背景複雜的設計時可以使用CSS3 Multiple Backgrounds的方式去處理

案例

設計圖左右各有兩條虛線時可使用兩張不同的背景圖

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
    background: url(left_line.png) left center no-repeat, url(left_right.png) right center no-repeat;
        //利用【逗號】的方式區分他是屬於第幾個背景圖，並且給予不同的位置設定一個靠左置中、一個靠右置中
}
</style>
</head>
<body>

<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>