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

时间: 2017-12-11阅读: 810标签: 网页

文字隐藏 

在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>



 


吐血推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入...

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入...

3.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

4.休闲娱乐: 网页游戏入口... H5游戏入口... 绝地求生首次打折降价了点此访问

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

如何给网页划分结构?

学习前端第一步:划分网页结构,网页的结构的划分应该遵循哪些原则,如何去划分网页的结构呢?对于一个前端初学者,第一步就是要学会如何划分一个网页的结构。当设计师给到你一张设计图,你需要根据这张图做出一个符合标准的页面

网页屏蔽(锁左、右键)的非JS方法

但是这种屏蔽方法的破解方法也是众所周知的。那就是连续单击鼠标左键和右键便又可以看到右键功能表了。但是,我见过一种很好的屏蔽右键的方法。它的原理和上面所说的不同。它并不是用JS来编写的脚本,而是利用定义网页属性来起到限制的作用

网页设计十大流行趋势

最近看到越来越多的网络设计尝试个性化的风格,其中比较突出的一点是个性化字体的增多:用自己独特设计的字体代替标准印刷体,让设计更加独特,配色改变反应了人们审美需求的改变。同色系网站设计将成为主流

静态和动态网页的区别?

在静态web程序中,客户端使用web浏览器经过网络连接到服务器上,使用HTTP协议发起一个请求(Request),告诉服务区我现在需要得到哪个页面,所有的请求交给web服务器

FreeMarker网页静态化

网页静态化解决方案在实际开发中运用比较多,例如新闻网站,门户网站中的新闻频道或者是文章类的频道。网页静态化技术和缓存技术的共同点都是为了减轻数据库的访问压力,但是具体的应用场景不同

使用 CSS 追踪用户

除了使用 JS 追踪用户,现在有人提出了还可以使用 CSS 进行网页追踪和分析,译者认为,这种方式更为 优雅,更为 简洁,且 不好屏蔽,值得尝试一波

h5网页水印SDK的实现代码示例

在网站浏览中,常常需要网页水印,以便防止用户截图或录屏暴露敏感信息后,追踪用户来源。如我们常用的钉钉软件,聊天背景就会有你的名字。那么如何实现网页水印效果呢?

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

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

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

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

使用 BeautifulSoup 和 Selenium 进行网页爬取

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

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

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全