网页开发中利用CSS以图换字的多中实现方法总汇

更新日期: 2017-12-11阅读: 3.1k标签: 网页

文字隐藏 

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

<style>
    h1 {
      width: 64px;
      height: 64px;
      background: url();
      font: 12px/1 '微软雅黑';
    }
    span {
      display: none;
    }
  </style>
  <h1>
    <span>文字</span>
  </h1>


负缩进  

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

<style>
    h1 {
      width: 64px;
      height: 64px;
      background: url();
      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() 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();
      font: 12px/1 '微软雅黑';
    }
  </style>
  <h1>文字</h1>


 0宽高

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

<style>
    h1 {
      width: 64px;
      height: 64px;
      background: url();
      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();
      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();
      display: block;
    }
  </style>
  <h1>文字</h1>


正缩进  

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

<style>
    h1 {
      width: 64px;
      height: 64px;
      background: url();
      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();
      font-size:0;
    }
  </style>
  <h1>文字</h1>



 


链接: https://www.fly63.com/article/detial/240

网页中文本朗读功能开发实现分享

同时针对大段的文本,不能整段的去读,要按照标点符号进行断句处理。重点当然就是先获取到当前标签上的文本,再把文本转化成语音即可。

如何嵌套一个网页html到另一个html中

在网页开发中,经常会遇到把一些通用内容的页面集中到一个页面中,需要使用这些页面只需要包含引入即可,这样有利于维护和修改,当通用页面修改时只需更改一个文件就可以了,不需要每个文件单独处理。

网站开发需要哪些知识_网页开发你需要知道的6件事

开发网站之前,你需要知道哪些事情呢?每个开发者的答案可能都不太相同,这里整理为6个方面:界面和用户体验、安全性、性能(Performance)、搜索引擎优化、技术(Technology)、解决bug

理解大型分布式网站你必须知道这些概念

理解大型分布式网站你必须知道这些概念:1. I/O优化、2. Web前端调优、3.服务降级(自动优雅降级)、4.幂等性设计、5.失效转移、6.性能优化、7. 代码优化、8. 负载均衡、9.缓存等

网页后缀html、htm、shtml、shtm有什么区别?

每一个网页或者说是web页都有其固定的后缀名,不同的后缀名对应着不同的文件格式和不同的规则、协议、用法,最常见的web页的后缀名是.html和.htm,但这只是web页最基本的两种文件格式,今天我们来介绍一下web页的其它一些文件格式。

html网页自动跳转方法_整理网页自动跳转的5种方法

网页自动跳转,是指当用户访问某个网页时,被自动跳转到另一个网页中去。网页自动跳转的主要作用是,当域名变更后,或者网站里的一个或多个网页被删除后,可以使用这种方式将用户引导到其它正常的网页中去,从而留住用户。

html页面锚点链接对SEO的作用,以及实现描点的三种方式

锚链链接是一个非常重要的概念,在网页中增加恰当的锚链接,会让所在网页和所指向网页的重要程度有所提升,从而影响到关键词排名。锚链接对SEO的作用主要体现在以下几个方面

使用 BeautifulSoup 和 Selenium 进行网页爬取

HTML几乎是平铺直叙的。CSS是一个伟大的进步,它清晰地区分了页面的结构和外观。在本教程中,您将了解在浏览器中看到的内容是如何实际呈现的,以及如何在必要时进行抓取。

实现主机访问虚拟机网页的方法总结

VMware Workstation提供了两种虚拟机上网方式,一种bridge,一种NAT,bridge可以获得公网地址,而NAT只能是内网地址了。例1:在虚拟机内搭建http服务器,使用公网地址访问,例2: ssh端口映射

静态网页与动态网页的区别?

静态网页是标准的HTML文件,它的文件扩展名是.htm、.html,静态网页是网站建设的基础。从网站浏览者的角度来看,无论是动态网页还是静态网页,都可以展示基本的文字和图片信息,但从网站开发、管理、维护的角度来看就有很大的差别。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!