div背景圖片完整填充樣式設置---background、background-size、background-attachment

<div>圖片</div>

<style>

div{

     background: url(images/images/bg.jpg) no-repeat;
     background-size: cover;
     background-attachment: fixed;

}

</style>

說明:

1、background-size

background-size中,100%和cover都是用於將圖片擴大或者縮放來適應整個容器

background-size:100% 100%;---按容器比例撐滿,圖片變形;

background-size:cover;---把背景圖片放大到適合元素容器的尺寸,圖片比例不變,但是要注意,超出容器的部分可能會裁掉。

當爲百分比的時候,100%和100%,100%也會顯示不一樣的效果:

background-size:這個屬性有兩個值,第一個值爲x軸方向的縮放比例或者px,第二個值爲y軸方向的縮放比例或者px,如果只寫一個值,則第二個值默認爲auto(根據圖片原來的比例,以及現有的寬度,來確定高度)
比方說:你有一張長寬比例爲4:3的圖片,有一個width:100px;height:50px;的盒子(也就是長寬比例爲2:1)。
background-size:100% 100%;這種方式設置完背景圖片的大小後,會完全鋪滿整個盒子,並且背景圖片的比例會因此改變爲2:1
background-size:100%;這種方式設置的背景圖片的大小,x軸會和盒子一樣的寬,但是y軸由於默認爲auto,根據上面的理論計算得背景圖片的高度爲300px,但是盒子只有50px高,超出的部分隱藏,所以看兩種寫法的效果自然就不一樣啦。
第一種效果你一定會看到完整的背景圖片,但是有可能被擠壓(失去圖片原來的比例)
第二種效果你不一定能看到完整的圖片,但是圖片的比例沒有發生變化。

2、background-attachment

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章