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

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

作者: isaaCyu | 来源:发表于2018-07-18 15:32 被阅读9次

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

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

    <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抓取的还是原始的文本信息。

相关文章

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

    先放上比较一般的解决方法 隐藏文字+背景图片实现代码如下: 接下来是一个比较舒服的写法 使用content实现 总...

  • 简书首页显示100字

    简书首页显示,文章标题。图片和百字内容文字。平时刷屏,人们看了标题和标题下百字文字,产生吸引,有了点击进去欲望。标...

  • SEO优化笔记

    通过阅读参考知乎两篇文章,我对我的网站进行了SEO优化: 文章内提到的标题优化格式: 首页使用更加美观的图片会增加...

  • 简书首页显示1图70个字

    简书首页,除了显示标题与纯文字内容100个字,标题与内容纯图片3幅。还有显示标题与内容1幅图文字70个。所以。简书...

  • 修改网站名称对百度排名的影响

    一般来说修改网站名称就等于修改网站标题,因为网站名称基本会出现在你网站所有的页面,包括首页栏目页内容页,修改了网站...

  • SpringBoot vue 垃圾分类 网站 系统 项目

    SpringBoot vue 垃圾分类 网站 系统 项目 SpringBoot 垃圾分类网站 功能介绍 首页 图片...

  • iOS button 文字图片上下/左右排布

    iOS button 文字图片上下/左右排布 button 文字图片上下/左右经常会用到,记录一下 上下: sel...

  • 浅谈幻灯片的板式——版面结构

    结构与色系 1.首(末)页: PPT的首页——用来表明PPT的主题,主要内容为文字+装饰图片+企业LOGO+副标题...

  • 用CSS渐变文字

    这两天在重构PC端,首页上有一段文字,用的是渐变图片,将底下的标题覆盖住了,用图片麻烦的地方就在于文案改动后,图片...

  • 手摸手教你实现图片懒加载

    懒加载(Lazy-Load)。它是针对图片加载时机的优化:在一些图片量比较大的网站(比如电商网站首页,或者团购网站...

网友评论

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

      本文链接:https://www.haomeiwen.com/subject/ymwopftx.html