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