从设置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 定义）的位置，背景图像如果要重复，将从这一点开始。

可能的值