zoukankan      html  css  js  c++  java
  • CSS以图换字的9种方法

    前面的话

      CSS以图换字的技术,很久都没人提起了。它是一种在h1标签内,使用图像替换文本元素的技术,使页面在设计和可访问性之间达到平衡。本文将详细介绍CSS以图换字的9种方法

    文字隐藏

      在h1标签中,新增span标签来保存标题内容,然后将其样式设置为display:none

      <style>
        h1 {
          width: 64px;
          height: 64px;
          background: url(https://static.xiaohuochai.site/icon/icon_64.ico);
          font: 12px/1 '微软雅黑';
        }
        span {
          display: none;
        }
      </style>
      <h1>
        <span>小火柴的蓝色理想</span>
      </h1>

    负缩进

      通过使用text-index:-9999px,这样一个比较大的负缩进,使文本移到页面以外的区域

      <style>
        h1 {
          width: 64px;
          height: 64px;
          background: url(https://static.xiaohuochai.site/icon/icon_64.ico);
          font: 12px/1 '微软雅黑';
          text-indent:-9999px;
        }
      </style>
      <h1>小火柴的蓝色理想</h1>

    负margin

      通过使用margin-left:-2000px,使盒模型向左偏移2000px,然后将宽度设置为2064px,从而页面中只显示2064px中64px的部分。将图片的背景设置为右对齐,且不重复

      <style>
        h1 {
          width: 2064px;
          height: 64px;
          background: url(https://static.xiaohuochai.site/icon/icon_64.ico) right no-repeat;
          font: 12px/1 '微软雅黑';
          margin-left:-2000px;
        }
      </style>
      <h1>小火柴的蓝色理想</h1>

    上padding

      因为背景是显示在padding-box区域中的,而文本是显示在content-box区域中。所以,将height设置为0,用padding-top来替代height,并设置overflow:hidden。则,可以只显示背景不显示文本

      <style>
        h1 {
          width: 64px;
          padding-top: 64px;
          height:0;
          overflow:hidden;
          background: url(https://static.xiaohuochai.site/icon/icon_64.ico);
          font: 12px/1 '微软雅黑';
        }
      </style>
      <h1>小火柴的蓝色理想</h1>

    0宽高

      通过新增一个span标签来保存文本内容,并将该标签的宽高设置为0,再设置溢出隐藏即可

      <style>
        h1 {
          width: 64px;
          height: 64px;
          background: url(https://static.xiaohuochai.site/icon/icon_64.ico);
          font: 12px/1 '微软雅黑';
        }
        span{display:block;width: 0;height:0;overflow:hidden;}
      </style>
      <h1><span>小火柴的蓝色理想</span></h1>

    文本透明

      设置文本的颜色为transparent,并设置font-size为1px,即减少行高的影响

      <style>
        h1 {
          width: 64px;
          height: 64px;
          background: url(https://static.xiaohuochai.site/icon/icon_64.ico);
          color:transparent;
          font-size:1px;
          }
      </style>
      <h1>小火柴的蓝色理想</h1>

     

    伪元素

      使用before伪元素,content设置为图片的URL,在h1元素上设置溢出隐藏

      <style>
        h1 {
          width: 64px;
          height: 64px;
          overflow: hidden;
          font: 12px/1 '微软雅黑';
        }
        h1:before {
          content: url(https://static.xiaohuochai.site/icon/icon_64.ico);
          display: block;
        }
      </style>
      <h1>小火柴的蓝色理想</h1>

    正缩进

      设置text-indent:100%,使文本缩进到父元素宽度区域的右侧。然后配合设置white-space:nowrap和overflow:hidden,使文本不换行,并溢出隐藏。从而隐藏文本内容

      <style>
        h1 {
          width: 64px;
          height: 64px;
          background: url(https://static.xiaohuochai.site/icon/icon_64.ico);
          text-indent: 100%;
          white-space: nowrap;
          overflow: hidden;
          font: 12px/1 '微软雅黑';
        }
      </style>
      <h1>小火柴的蓝色理想</h1>

    字体大小

      通过设置font-size:0,可以将字体大小设置为0

      <style>
        h1 {
          width: 64px;
          height: 64px;
          background: url(https://static.xiaohuochai.site/icon/icon_64.ico);
          font-size:0;
        }
      </style>
      <h1>小火柴的蓝色理想</h1>

  • 相关阅读:
    现在的代码,贴一下
    2014年七月写过的代码,现在看来,还有待改进呀
    第一次做技术论坛发博文,不知道说点啥
    04-树6. Huffman Codes--优先队列(堆)在哈夫曼树与哈夫曼编码上的应用
    04-树5. File Transfer--并查集
    04-树4. Root of AVL Tree-平衡查找树AVL树的实现
    03-树3. Tree Traversals Again (25)将先序遍历和中序遍历转为后序遍历
    03-树2. List Leaves (25) 二叉树的层序遍历
    二叉树的遍历:先序中序后序遍历的递归与非递归实现及层序遍历
    最大子序列和问题之算法优化
  • 原文地址:https://www.cnblogs.com/xiaohuochai/p/7988987.html
Copyright © 2011-2022 走看看