在做页面时候,有时难免会把图片做成背景,但是又想加个链接,有多种解决办法:

今天讲解其中的一种:a标签在需要加链接标签的外面,例:Google Reader

CSS代码如下:

h1 { 

    height:30px; 

    width:128px; 

    background:url("http://www.google.com/reader/ui/2677736484-reader-logo-zh_CN.gif") no-repeat scroll 0 0 transparent; 

    cursor:pointer; //指定鼠标指针显示样式 

}

h1 span { 

    display:none; //隐藏span里的内容,使用户只能看到背景图片,即logo 

}

HTML代码如下:

<a href="https://www.google.com/reader/view/">
    <h1>
        <span>Google Reader</span>
    </h1>
</a>

点评:因为a标签在h1标签的外面,就是说h1标签已经被a标签选中,所以直接给h1加背景图片就行了。

注意点:不要忘了定义h1标签的高度和宽度;不要忘了把span标签里的内容隐藏。