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