网络不好的情况下优先加载html,不加载css,做到网站也能正常使用
方法一:a标签高度设为0,将图片加在padding中把a标签撑开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> h1 a{ display: block; width: 180px; height: 0px; padding-top: 70px; text-indent: -9999px; background: url("../1-html+css/图片/tb.png") 0 0 no-repeat; overflow: hidden; border: 10px solid blue; } </style> </head> <body> <div> <h1><a href="#">淘宝网</a></h1> </div> </body> </html>
方法二:用text-indent进行首行缩进,white-space:nowrap;强制文本不换行,然后进行溢出部分隐藏
<!-- 网络不好的情况下优先加载html 不加载css,做到网站也能正常使用 --> <html> <head> <meta charset="utf-8"> <title>图片</title> <link rel="stylesheet" href=""> <style type="text/css"> a{ display: inline-block; text-decoration: none; color: #424242; width: 160px; height: 70px; border: 1px solid black; background-image: url(../图片/tb.png); background-size: 160px 70px; text-indent: 160px; white-space: nowrap; overflow: hidden; } </style> </head> <body> <a href="http://taobao.com" target="_blank">淘宝网</a> </body> </html>