Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  经典实例  >  正文 css中text-indent:-99999px深入分析

css中text-indent:-99999px深入分析

发布时间:2020-05-11   编辑:www.jquerycn.cn
jquery中文网为您提供css中text-indent:-99999px深入分析等资源,欢迎您收藏本站,我们将为您提供最新的css中text-indent:-99999px深入分析资源
text-indent:-99999px 是个很常见的东西,将文字向前缩进,让普通用户看不到,而搜索引擎却能看到。搜索引擎不像人,读不懂图片,所以网站的 Logo 搜索引擎是看不懂的,为了照顾它,开发者直接在一个 h1 标签里放上网站的标题给搜索引擎看,然后用 text-indent:-99999px 把文字对用户隐藏掉,然后用一张背景图片的 Logo 插入

但搜索引擎越来越聪明了,它渐渐学会了我们的方法,并不识好人心的认为我们在对用户刻意隐瞒什么(←_←),导致自己的网站在搜索引擎心中减分。
Alt

怎么办呢?我们可以用一个比较老的办法,就是将文字换成 img 标签,这么写:

 

 代码如下 复制代码

<img src="logo.png" alt="斌果博客" />

此时你是不是感觉被我坑了,本文根本就是废话嘛。不!
text-indent

新方法的问题又回到了 text-indent 上,既然 –99999px 会被识破,那可以另辟蹊径,巧用 text-indent:
 

 代码如下 复制代码

h1.logo{
    text-indent: 100%;/*让其缩进到元素本身之外*/
    white-space: nowrap;/*禁止文字换行*/
    overflow: hidden;/*隐藏掉那堆多出去的文字*/
    background: url("images/logo.jpg") no-repeat center;/*放上精心设计的 Logo 图片~*/
}

是不是就可以完美的解决掉问题啦~

 

您可能感兴趣的文章:
css中text-indent:-99999px深入分析
CSS text-indent 属性
如何在CentOS 8上安装htop
CSS text-indent 属性
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
CSS手册简编:文本属性
jQuery源码分析系列
CSS 滤镜效果:模糊、灰度、亮度等
H5新标签浏览器的兼容问题
css控制段落首行缩进 text-indent

[关闭]