超链接背景图片

最新推荐文章于 2023-10-29 20:25:07 发布

原创最新推荐文章于 2023-10-29 20:25:07 发布 · 1.4k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

css 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了两种在HTML中设置超链接背景图片的方法。在网速不佳时，保证页面仍能基本显示，即使浏览器屏蔽CSS和JavaScript，也能实现超链接的基本效果。

第一种方法：

<style>
    a{
        display: inline-block;
        width: 250px;
        height: 150px;
        background-image: url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1728444903,2919761805&fm=26&gp=0.jpg");
        background-size: 250px 150px;
        border: 1px solid black;
        /*下面作用是隐藏文字*/
        text-indent: 20em;
        white-space: nowrap;
        overflow: hidden;
    }
</style>
<body>
<a href="http://www.taobao.com">淘宝网</a>
</body>

在这里插入图片描述
当网速不好的时候，浏览器会屏蔽css和javascript，大型网站在这种情况下还是要保证网页能加载出来，所以html才是最主要功能。
浏览器屏蔽css时，页面如下。当正常加载时，淘宝网要不能显示出来。

第二种方法：

<style>
    a{
        display: inline-block;
        width: 250px;
        /*下面三句是关键*/
        height: 0px;
        padding-top: 150px;
        overflow: hidden;
        background-image: url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1728444903,2919761805&fm=26&gp=0.jpg");
        background-size: 250px 150px;
        border: 1px solid black;
    }
</style>
<body>
<a href="http://www.taobao.com">淘宝网</a>
</body>