2018-07-18 记录：网站首页经常会出现的标题文字转图片

先放上比较一般的解决方法

隐藏文字+背景图片实现
代码如下：

    
网站标题
    h1{
            width:180px;
            height:36px;
            background:url(logo.png);
            text-indent:-999px;
    }

接下来是一个比较舒服的写法

使用content实现

    
网站标题
    h1{
            content：url（logo.png）
    }

• 总结

  前面的方法中

  是一个普通元素，因此需要先设定尺寸然后隐藏文字
  后面的方法中使用content属性，此时

  已经成了替换元素，原有的文字内容被替换，并且使用替换元素的尺寸规则，完美适应原始图片大小。
  并且虽然视觉上文字被替换成了图片，但是实际上屏幕阅读设备阅读的还是文字内容，搜索引擎seo抓取的还是原始的文本信息。