浅谈CSS以图换字的9种方式

日期:2021-01-20 类型:科技新闻 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站

前面的话

CSS以图换字的技术性,很久都没人提到了。它是1种在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:⑼999px,这样1个较为大的负缩进,使文字移到网页页面之外的地区

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

负margin

根据应用margin-left:⑵000px,使盒实体模型向左偏位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:⑵000px;
    }
  </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宽高

根据新增1个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>

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。