css3入门

CSS3窍门:隐藏文本

字号+ 作者: 来源: 2014-11-16 21:49 我要评论( )

下面是一个非常酷的CSS 3隐藏文字信息的把戏。我们将使用的::selection定义文字的颜色。而 ::selection选择的声明是一种新的工具,在CSS 3中Internet Explorer还不能支持。当你选中网页中的文字

下面是一个非常酷的CSS 3隐藏文字信息的把戏。我们将使用的::selection定义文字的颜色。而 ::selection选择的声明是一种新的工具,在CSS 3中Internet Explorer还不能支持。当你选中网页中的文字时可以改变默认的蓝色。具体可以这样实现:

  1. p::selection { background: #f00; }  
  2. p::-moz-selection { background: #f00; }  

::-moz-selection 只支持FireFox,当你选择上面的任何段落背景颜色将变为红色,我们又怎能使用隐藏文本呢?呵呵,很容易,只需更改字体的颜色和文字颜色,是对非重要的文字相同,使用对比的单词,你要显示的颜色。为了区别隐藏的话,包装在一个<span>标记它们。

  1. <p>These are the words I want to hide.  
  2. <span>And these are the words I want to show</span></p> 
  3. p::selection { background:#000;color:#000; }  
  4. p::-moz-selection { background:#000;color:#000; }  
  5. p span::selection { background:#fff;color:#000; }  
  6. p span::-moz-selection { background:#fff;color:#000; }  

点击这里查看该超炫效果!(该预览地址不支持IE,请使用FireFox,谷歌浏览器进行浏览!)

(责任编辑:admin)

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • {CSS}CSS隐藏网页文字的几种常用方法_div+css布局教程

    {CSS}CSS隐藏网页文字的几种常用方法_div+css布局教程

    2015-09-17 16:41

  • {CSS}从A页面连接到B页面后并直接把B页面的隐藏层显示_div+css布局教程

    {CSS}从A页面连接到B页面后并直接把B页面的隐藏层显示_div+css布局教

    2015-09-17 16:38

  • {CSS}CSS教程:text-indent隐藏文字出现虚线框outline_div+css布局教程

    {CSS}CSS教程:text-indent隐藏文字出现虚线框outline_div+css布局教

    2015-09-17 16:37

  • {CSS}CSS教程:网页文本渐变_div+css布局教程

    {CSS}CSS教程:网页文本渐变_div+css布局教程

    2015-09-17 16:33

网友点评