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);

    }

  • 相关阅读:
    [Java] java中的异常处理
    Jmeter之定时器
    Jmeter之检查点
    Jmeter之集合点
    Jmeter之关联
    Jmeter之参数化
    Jmeter测试WebService接口
    Jmeter测试MySQL数据库
    Jmeter测试HTTP接口
    使用Postman对HTTP接口进行功能测试
  • 原文地址:https://www.cnblogs.com/lwwen/p/5641330.html
Copyright © 2011-2022 走看看