從設置a標簽背景圖片無法顯示探究background-image:url()

1、先說問題：把首頁面的頭部用一個大的背景圖平鋪，占據全屏，點擊圖片任何位置，都進行跳轉，所以想到把圖片作為a標簽的背景圖的方式來實現，但問題來了，背景圖死活無法顯示，頁面一片空白，代碼如下：

    <div id="banner" class="banner">
        <a href="#" class="d1"></a>
    </div>

    #banner a{
    background-image:url(image/bannernews.jpg);
    background-repeat: no-repeat;
    background-position:50% 50%;
}

2、然后在w3school上看一下background-image的定義：

background-image 屬性為元素設置背景圖像。

元素的背景占據了元素的全部尺寸，包括內邊距和邊框，但不包括外邊距。

着重看這句話：元素的背景占據了元素的全部尺寸，如果設置的背景圖片可以顯示出來，那么，首先要保證元素擁有具體的尺寸，即寬、高不能為0.
因為a標簽並不是一個塊級元素，所以此時a標簽的寬、高為0，如需要主動設置a標簽的寬高，首先讓a標簽變成塊級元素，然后設置尺寸，這樣，背景圖就可以正常顯示出來了，樣式調整代碼如下：

#banner a{
    display:block;
    width:100%;
    height:270px;
    background-image:url(image/bannernews.jpg);
    background-repeat: no-repeat;
    background-position:50% 50%;
}

補充：
不指定寬、高，通過設置元素的雙向偏移量，也可以達到設置元素尺寸的目的，如下代碼：

    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;

    /* 當頁面的其余部分滾動時，當前元素不會移動。  */
    position:fixed;
    /* 讓這個層充滿整個屏幕 */
    height:100%;
    width:100%;
    left:0;
    top:0;

3、順便說一下background-position：

定義和用法

background-position 屬性設置背景圖像的起始位置。

這個屬性設置背景原圖像（由 background-image 定義）的位置，背景圖像如果要重復，將從這一點開始。

可能的值

版權聲明：本文為CSDN博主「逍遙不羈」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/javaloveiphone/article/details/51008379