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

    }

  • 相关阅读:
    Oracle Spool详解
    转自云界漫步:同步容灾100公里的限制来自哪里
    中国十大基金公司排行榜
    DataGuard体系结构
    SWIFT国际资金清算系统
    linux -- 命令大全
    bootstrap -- css -- 图片
    bootstrap -- css -- 按钮
    bootstrap -- css -- 表单控件
    bootstrap -- css -- 表单
  • 原文地址:https://www.cnblogs.com/lwwen/p/5641330.html
Copyright © 2011-2022 走看看