zoukankan      html  css  js  c++  java
  • css用背景图来替换文字来达到隐藏文字的目的

    根据html代码的不同来分成两大类方法,如下

    html代码:

    <h1 class="replace-indent">hello see</h1>

    第一种方法:text-indent

    .replace-indent{

      height:200px;

      200px;

      background:url();

      text-indent:-9999px;

    }

    第二种方法:

    .replace-indent{

      height:200px;

      200px;  

      background:url();

      text-indent:100%;

      white-space:nowrap;

      overflow:hidden;

    }

    第三种方法:

    .replace-indent{

      height:0px;

      200px;

      background:url();

      padding:200px 0 0 0;

      overflow:hidden;

    }

    第四种方法:before

    .replace-indent{

      image's width;

      height:image's height;

      overflow:hidden;

    }

    .replace-indent : before{

      content:url();

    }

    html代码:

    <h1 class="replace-indent"><span>hello see</span></h1>

    第一种方法:

    .replace-indent{

      height:200px;

      200px;

      background:url();

    }


    span{

      display:none;

    }

    第二种方法:

    .replace-indent{

      height:200px;

      200px;

      background:url();

    }

    span{

      0;

      height:0;

      display:block;

      overflow:hidden;

    }

    第三种方法:

    .replace-indent{

      height:200px;

      200px;

      background:url();

    }

    span{

      clip-path:polygon(0px 0px,0px 0px,0px 0px,0px 0px,0px 0px);

      -webkit-clip-path:polygon(0px 0px,0px 0px,0px 0px,0px 0px,0px 0px);

    }

  • 相关阅读:
    沙盒配置好的测试
    云端存储的实现:云存储1
    演职人员名单MobileMenuList
    关于GitHub的朋友的NE Game
    到了冲刺阶段
    云存储的配置3
    刚才花了1$赞助了那位伙计
    我知道这对自己是个积累的过程,很好,我成长的很快
    煎熬过后终于有一刻释怀
    空白不曾停止。。。
  • 原文地址:https://www.cnblogs.com/lwwen/p/5641330.html
Copyright © 2011-2022 走看看