如何讓div的大小隨著背景圖片的大小變大
時間：
本達868由 分享
如何讓div的大小隨著背景圖片的大小變大
在做網(wǎng)頁的時候，經(jīng)常會遇到為div添加背景圖片，那么我們應該怎樣做才能讓div的大小隨著背景圖片的變大而變大呢，也就是讓我們的div被背景圖片所撐起來。具體請看下面學習啦小編介紹的操作方法!
讓div的大小隨著背景圖片的大小變大的方法
首先，我們需要新建一個htm頁面，并在頁面中寫上一個div。并為div添加背景圖片，為背景圖片添加一些基本的樣式。
然后，我們按下鍵盤上的F12，查看其在瀏覽器中的效果。效果肯定是頁面中沒有相應的背景圖片，理由是我們做的是背景圖片，無法將div撐起一定的高度。
既然不能撐起來，我們也不能單純的為div設置高度，這樣無法解決不同大小背景圖片的問題，我們可以利用css中的偽元素::after或者::before
可以簡單的解釋一下，利用偽元素是將指定標簽的前面或者后面的內容設為空，并設成塊元素，并設定以百分比為單位的padding-bottom或者padding-top。以此撐開這個div。
另一種方法是，我們在有背景圖片的div的內部再套一個div，然后為這個內部的div添加相應的樣式，使得外層div可以被撐起來。
這里我采用的是和第一個相同的做法，為這個內部div設定內部邊距上或者下都可以。同樣是以百分比作為單位。這樣我們再次在瀏覽器中查看，就可以看到作為背景的圖片了。
最后告訴大家一些注意事項，不管我們采用方法一還是方法二，都是設置的上下的內邊距而不是外邊距，并且要以百分比作為單位。
看了“如何讓div的大小隨著背景圖片的大小變大”的人還看了