隐藏CSS文字链接图片

最新推荐文章于 2021-06-07 11:23:26 发布
最新推荐文章于 2021-06-07 11:23:26 发布
阅读量249 收藏
点赞数
原文链接：http://www.cnblogs.com/passby/articles/2138476.html
版权

http://caib.me/hide-text/

最近整理的一份CSS文字隐藏的demo，总结了几种方法，希望得出一种最完美的方案放进自己的代码片段，可是，到最后却陷入一种重复不断地推翻结 论的境地。因为需要考虑的应用场景和元素实在太多，放下浏览器不谈，不同的应用终端，不同的标签结构会有不一样的最优方案，因此，与其希望在工作上多“偷 一些懒”，不如平常多巩固积累基础的知识，在需要权衡的时候，便能更加得心应手。

因为自己经验尚浅，demo部分难免会有错漏情况，如发现问题，望大家能指出。

方法列表 demo

  1. 毫无保留：display:none

    • 代码片段：

      (x)HTML
      <p class="hide_display">我是打酱油的文本</p>
      CSS
      /* 暴力隐藏 */
      .hide_display{display:none;}

    • 兼容性：

      浏览器兼容性
      CHROMEFIREFOXOPERASAFARIIE
      版本53.610.104678
      支持情况YYYYYYY

    • 优点：

      1. 方便、快捷
      2. 兼容性好

    • 缺点：

      1. 屏幕阅读器无法阅读
      2. 超链接不适用
      3. 图片替代文本需要其他标签的背景
      4. 影响搜索排名
      5. 大量使用容易被认为是SEO作弊

  2. 折中选择：overflow:hidden/position:absolute/visibility:hidden

    • 代码片段：

      (x)HTML
      <span class="hide_overflow">我是一号打酱油的文本</span>
       
      <p class="hide_position">我是二号打酱油的文本</p>
       
      <p class="hide_visibility">我是三号打酱油的文本</p>
      CSS
      /* 隐藏元素，脱离文本流，使元素不影响其他元素 */
      .hide_overflow{
      height:0px;
      overflow:hidden;
      display:block;/* 行内元素需要 */
      float:left; /* 脱离文档流 或者position:absolute;*/
      }
      /* 定位在可视范围外，脱离文本流，使元素不影响其他元素 */
      .hide_position{
      position:absolute;
      left:-32767px;
      }
      /* 原理与.hide_position一样*/
      .hide_visibility{
      visibility:hidden;
      position:absolute; /* 脱离文档流 */
      margin-left:-32767px;
      }

    • 兼容性：

      浏览器兼容性
      CHROMEFIREFOXOPERASAFARIIE
      版本53.610.104678
      支持情况YYYYYYY

    • 优点：

      1. 方便、快捷
      2. 不希望屏幕阅读器读取的内容可以使用visibility

    • 缺点：

      1. 超链接不适用
      2. 图片替代文本需要其他标签的背景
      3. overflow:hidden;被认为有害体验

  3. 体验损失：text-indent负值

    • 代码片段：

      (x)HTML
      <p class="hide_tex"><a href="#">我是打酱油的超链接一号</a></p>
      <a class="hide_tex_span" href="#"><span>我是打酱油的超链接二号</span></a>
      <!--全英文字符在IE下不能被隐藏 -->
      <input class="hide_tex_input" type="submit" />
      <input class="hide_tex_input" type="submit" />
      <button class="hide_tex_input">我是打酱油的文本btn</button>
      CSS
      .hide_tex a, .hide_tex_span{
      text-indent:-32767px;
      display:block; /* text-indent适用块状元素中行内元素和文本节点 */
      /* 演示需要 */
      width:200px;
      height:20px;
      margin-left:300px;
      background-color:#ccc;
      /* outline:none; 不建议隐藏outline，键盘流选手无法操作 */
      }
      .hide_tex_input{
      text-indent:-32767px;
      width:200px;
      height:50px;
      display:block;
      }

    • 兼容性：

      浏览器兼容性
      CHROMEFIREFOXOPERASAFARIIE
      版本53.610.104678
      支持情况YYYYYYY

    • 优点：

      1. 适用超链接的图片替代

    • 缺点：

      1. FF的虚边问题
      2. text-indent容易产生bug

  4. 牛皮癣：font-size设零

    • 代码片段：

      (x)HTML
      <p class="hide_fs">我是擦不掉牛皮癣</p>
      <button class="hide_fs">我是打酱油的文本btn</button>
      <input class="hide_fs" type="submit" />
      CSS
      .hide_fs{ font-size:0; }

    • 兼容性：

      浏览器兼容性
      CHROMEFIREFOXOPERASAFARIIE
      版本53.610.104678
      支持情况NYYNNNN

    • 优点：

      1. 方便、快捷

    • 缺点：

      1. 浏览器表现不一致，ie,safari有最小字号，chrome最小12px，ff不显示文本
      2. 适用环境少

  5. 强强联合：line-height三倍

    • 代码片段：

      (x)HTML
      <p class="hide_lh"><a href="#">目前为止被正常人类普遍接受的疑似最完美隐藏文字方案，传说是tommy发明的</a></p>
      <!-- line-height在ff3.6的button无法隐藏文本，需要配合其他方式 -->
      <button class="hide_lh_btn">我是打酱油的文本btn</button>
      <!-- line-height在ff3.6、opera的input无法隐藏文本，需要配合其他方式 -->
      <input class="hide_lh_btn" type="submit" />
      <!-- 目前比较完善的方案 -->
      <input class="hide_lh_btn_final" type="submit" />
      CSS
      /* 设定高度，利用行高将文本撑到容器可视范围外 */
      .hide_lh a, .hide_lh_btn{
      width:200px;
      height:20px;
      overflow:hidden;
      line-height: 60px;/* 行高最好设3倍或以上，chrome容易后漏 */
      display:block;/* 行内元素需要 */
      /* 演示需要 */
      background-color:#ccc;
      margin-left:300px;
      }
      .hide_lh_btn_final{
      width:200px;
      height:20px;
      overflow:hidden;
      line-height:60px;
      display:block;
      font-size:0px; /* opera和ff支持 */
      }

    • 兼容性：

      浏览器兼容性
      CHROMEFIREFOXOPERASAFARIIE
      版本53.610.104678
      支持情况YYYYYYY

    • 优点：

      1. 兼容性好
      2. 超链接和图片替代文本可用

    • 缺点：

      1. 使用限制较大，需要定宽高

  6. 多一丁点：前置背景遮挡

    • 代码片段：

      (x)HTML
      <!-- 在css无效和css有效图片无效都适用 -->
      <a class="hide_bg" href="#"><span class="front_bg"></span>我是可访问性的化身</a>
      CSS
      .hide_bg{
      width:200px;
      height:20px;
      position:relative;
      display:block;/* 行内元素需要 */
      }
      .hide_bg .front_bg{
      background:url('bg_text.png') no-repeat; /* 背景内容等于或大于容器大小 */
      position:absolute; /* 绝对定位，不影响文本 */
      left:0px;
      top:0px;
      width:200px;/* 与父元素等宽高 */
      height:20px;
      display:block;
      /* cursor:pointer; ie6和链接需要用 */
      }

    • 兼容性：

      浏览器兼容性
      CHROMEFIREFOXOPERASAFARIIE
      版本53.610.104678
      支持情况YYYYYYY

    • 优点：

      1. 兼容性好
      2. 超链接和图片替代文本可用
      3. 可访问性强

    • 缺点：

      1. 使用限制较大，需要定宽高
      2. 代码冗余，需要空标签

  7. 另辟蹊径：content:”"

    • 代码片段：

      (x)HTML
      <!--只有opera支持，按定义只能用在:before 和:after-->
      <a class="hide_ct" href="#">也许我才是最合适的，谁知道呢，内容表现分离。只有opera支持</a>
      CSS
      .hide_ct{ content:&quot;&quot;; }

    • 兼容性：

      浏览器兼容性
      CHROMEFIREFOXOPERASAFARIIE
      版本53.610.104678
      支持情况NNYNNNN

    • 优点：

      1. 简单

    • 缺点：

      1. 内容样式分离
      2. 不实用

转载于:https://www.cnblogs.com/passby/articles/2138476.html

weixin_30364325
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
保护图片(隐藏图片真实地址) 实例
11-28
保护图片(隐藏图片真实地址) 实例 js javascript
a标签中写有文字并有图片如何隐藏文字只显示图片
09-28
然而，不同浏览器对CSS的解析和实现可能存在差异，尤其是老版本的Internet Explorer（如IE7）和其他浏览器，这可能导致隐藏文字时图片无法正常显示。 在标题和描述中提到的问题是，当使用CSS的`text-indent`属性将...
php 隐藏图片链接
weixin_34192732的博客
07-06 204
//输出图片 imageOutput.php &lt;html&gt; &lt;head&gt; &lt;title&gt;OutPut Image&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;met
隐藏文本和链接
南三方---网站设计开发录
11-01 490
隐藏文本和链接：采用隐藏的手段在网页上放置许多文本和链接，浏览者看不到隐藏文本而搜索引擎可以爬取到，从而欺骗搜索引擎对网页关键词的判断。这些手段包括：将文本和链接的颜色设置与背景一样 将文本堆积在图片后使用 CSS 隐藏文本，如：字体大小设置为0 通过 CSS 隐藏链接，如：链接的像素为1把链接隐藏在小字符里，如：逗号等隐藏文本和链接的SEO作弊手段不同于Cloaking-障眼法和关键词叠
HTML如何使用隐藏图片,css3如何隐藏图片？
weixin_29936201的博客
06-07 7569
css3隐藏图片的方法：1、为图片元素设置display:none;样式来隐藏。2、使用visibility:hidden;样式隐藏图片。3、使用opacity:0;样式通过设置图片完全透明来设置图片不可见。css中可以使用下面几种样式隐藏图片：display:none;visibility:hidden;opacity:0;下面我们就来介绍这几种隐藏图片的方法：1、display:none;di...
隐藏HTML 文字链接,让超链接文字隐藏掉css代码
weixin_39913472的博客
06-03 836
让超链接内翰墨埋伏掉css技巧结构办法无心div css网页组织时，运用超链接a标签，但重要将文字窜伏，但超链接又不失效的需求。比喻图片或图标的超链接，把图片或图标作为布景图片，上面应用超链接a加文字，但又不想让文字显示，超链接具有的又大要点击，图片也可以瞥见这个时刻即是隐藏超链接文字。应用CSS属性单词：text-indenttext-indent引见：文本内容缩进属性，思空见贯用于文段开头文字...
css3动画鼠标经过图片文字动画特效
08-05
"css3动画鼠标经过图片文字动画特效"是一个常见的应用场景，它通过CSS3的:hover伪类和关键帧动画（@keyframes）来实现。当用户将鼠标悬停在特定元素上时，这种特效能够使图片或文字产生动态变化，提升用户体验。 ...
用CSS实现的图片透明度链接效果代码
09-25
标题中的“用CSS实现的图片透明度链接效果代码”指的是使用CSS来控制图片的透明度，并结合链接功能，实现一种交互式的视觉效果。当鼠标悬停在图片上时，图片会变得半透明，同时显示出文字介绍，还可以添加其他功能，...
js+css3下划线文字导航菜单特效
06-24
本篇将详细探讨如何利用JavaScript（js）与CSS3（层叠样式表第三版）来实现一种创新的下划线文字导航菜单特效，该特效在鼠标悬停时会展示动态的下划线效果，并可改变文字颜色。 首先，让我们从HTML结构开始。一个...
css3下划线文字导航特效代码
03-20
同时，`谷普下载.url`和`说明.url`可能是链接到相关教程或资源的快捷方式，可以帮助你进一步探索和实践CSS3下划线文字导航的实现。 总的来说，CSS3下划线文字导航特效的实现涉及到了CSS3的一些核心特性，如伪类选择...
如何把BT种子隐藏在图片内
12-17
如何把BT种子隐藏在图片内
CSS 基础4（超链接状态、隐藏、css文件、优先级）
litengbin的博客
01-16 802
CSS调整超链状态 1.伪类，所谓的伪类即被选中的元素处于某种状态的时候  超链状态有4种  link - 初始状态，从未被访问过  visited - 已访问过  hover - 鼠标悬停于超链的上方  active - 鼠标左键点击下去，但是尚未弹起的时候 a:link {color: #FF0000} a:visited {color: #00FF00} a:hove
div+css图片过大，隐藏图片
学习园地
11-15 1055
页面上使用的是div，背景是图片，但是图片太大了，可以使用div的overflow的样式，设置为hidden来隐藏过大的图片，去掉滚动条
css隐藏和显示
leng0920的博客
08-19 1261
.aa{      display:none;隐藏 }    .aa{      display:block;显示 }
图片中添加隐藏信息
weixin_39205240的博客
09-18 1824
&lt;!DOCTYPE html&gt; &lt;html lang='en'&gt; &lt;head&gt; &lt;meta charset='UTF-8'&gt; &lt;meta name='renderer'  content='webkit'&gt; &lt;meta name='renderer'  content='ie-stand'&gt; ...
html隐藏浏览器url,如何才能找到网页CSS文件下用URL()指令隐藏了图片地址的调用图片?对方网站的图片命名路径很无解。...
weixin_30972131的博客
06-04 571
法一：　先看看页面上有没有“全屏播放”，“下载”之类的链接，要是有的话就方便了，点下这个链接，会弹出全屏播放的窗口，复制地址栏你的地址就是了！点“全屏播放”就可以找到其地址了！方法二：查看源码法！一般的网页打开后，先选择浏览器菜单里的“查看”－＞“源文件”(或在页面的空白地方点鼠标右键，选“查看源文件”)，计算机会用自动用“记事本”显示这个网页的源代码，然后我们用“记事本”的查找功能，在源代码里搜...
如何去掉超链接的下划线
My 部落格
06-16 2180
 我们可以用CSS语法来控制超链接的形式、颜色变化，为什么链接一定要使用下划线和颜色区分呢？ 其主要原因主要是考虑到   1、视力差的人 2、色盲的人 。。。 下面我们做一个这样的链接：未被点击时超链接文字无下划线，显示为蓝色；当鼠标在链接上时有下划线，链接文字显示为红色；当点击链接后，链接无下划线，显示为绿色。 实现方法很简单，在源代码的和之间加上如下的CSS语法控制： 　　 　　 　　 a:
网络图片转成base64, 在线图片或文件点击下载（隐藏链接）
hugejihu9的专栏
11-22 700
文章来自：源码在线https://www.shengli.me/javascript/284.html    
如何用html语言实现文字链接展开和隐藏文字
最新发布
06-08
要实现文字链接展开和隐藏文字，可以使用HTML和JavaScript。 首先，在HTML中创建一个链接，例如： ``` ()">展开/隐藏 ``` 然后，在JavaScript中编写toggleText函数，用于展开和隐藏文字。可以使用CSS的display...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值