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

    }

  • 相关阅读:
    day13—— luffy项目 User表的配置
    day13 —— luffy项目 数据库配置
    day13- luffy项目 后端搭建
    Vue环境搭建
    Python创建虚拟环境
    pip换源
    day12--DRF 进阶7 JWT补充、基于权限的角色控制、django缓存
    C语言输出格式总结-printf()
    PAT 甲级 1108 Finding Average (20分)
    DAY30
  • 原文地址:https://www.cnblogs.com/lwwen/p/5641330.html
Copyright © 2011-2022 走看看