超链接背景图片

最新推荐文章于 2022-04-09 23:08:13 发布

zmj2051176726

最新推荐文章于 2022-04-09 23:08:13 发布

阅读量1.4k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/xiaoxingxingzai/article/details/102709193

版权

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

摘要由CSDN通过智能技术生成

第一种方法：

<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时，页面如下。当正常加载时，淘宝网要不能显示出来。

第二种方法：