DIV CSS 佈局教程網

由於正在做手機端界面，自適應的布局成了最主要的工作，在最近對背景圖片自動伸縮頻繁使用，對自動伸縮的方法有一點心得體會。

一、一種比較土的方法，<img>置於底層。

方法如下：

CSS代碼：

    img{ position:absolute; z-index:-10;width:50%;}

HTML:

 

    <img src="背景圖片路徑" />
    <span>字在背景上</span>

 

此時，背景可以自動伸縮，不過底層圖片和上面的字是無關聯的，想要在屏幕變化的情況下保持二者對應關系不變，需要用百分比表示間距和尺寸。
這種方法可以實現，但是個人感覺不太規范，但當時實在沒有更好的辦法。

二、CSS3有背景尺寸屬性background-size，真是前端的福音

 

方法如下：

CSS:

div{
	width:200px;
	height:100px;
	background-image:url(bg.jpg);
	background-size:100% 100%;
}

HTML:

 

 

<div>圖片伸縮</div>

我只記錄了圖片充滿整個元素的情況，background-size還有保持圖片寬高比等其他用法。

本博客為學習筆記，深知自己有很多使用不規范之處，歡迎各位大俠批評指正～～～