先放上比较一般的解决方法
隐藏文字+背景图片实现
代码如下:
<h1>网站标题</h1>
h1{
width:180px;
height:36px;
background:url(logo.png);
text-indent:-999px;
}
接下来是一个比较舒服的写法
使用content实现
<h1>网站标题</h1>
h1{
content:url(logo.png)
}
-
总结
前面的方法中 <h1>是一个普通元素,因此需要先设定尺寸然后隐藏文字
后面的方法中使用content属性,此时<h1>已经成了替换元素,原有的文字内容被替换,并且使用替换元素的尺寸规则,完美适应原始图片大小。
并且虽然视觉上文字被替换成了图片,但是实际上屏幕阅读设备阅读的还是文字内容,搜索引擎seo抓取的还是原始的文本信息。
网友评论