淘宝网以图换字
网络不好的情况下优先加载html,不加载css,做到网站也能正常使用
方法一:a标签高度设为0,将图片加在padding中把a标签撑开
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<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> <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>