CSS用图换字多种方法

前面的话

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>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

CSS怪异盒模型和标准盒模型如何使用

CSS3中的transform功能详解

星星旅游还为您提供以下相关内容希望对您有帮助：

在电脑上，使用HTML和CSS来替换文字的操作流程相当直接。首先，你需要在HTML文档中创建文本，例如：“这是一段待替换的文本。”`这是一段待替换的文本。`然后，通过CSS来实现替换，比如定义`.replacement`类的样式，如``，这将使得文本加粗。如果你想在一段文字中多次替换，只需使用``标签多次应用。...

一、使用word-wrap属性 word-wrap属性允许长单词或URL跨越多行。当文本行中的字符串超出其容器边界时，该属性允许内容自动换行。例如：word-wrap: break-word;这将使得浏览器在必要时进行断字并换行。这对于处理过长的单词或URL特别有用。二、使用overflow属性结合白空间处理 当内容超出其容器边界时，可...

1、首先在zTreeStyle/img 中添加你想修改样式的图片，下面是处理好的图tree.png片，给大家使用下。2、在zTree_v3/css/ zTreeStyle/zTreeStyle.css把背景图路径换成自己的图片。3、最后就是找位置，找到你想用图标的位置。如下面表示当修改不点击时复选框样式。

这是一张图片

你好 可以先给图片一个左浮动 float:left ;使其图片浮动到左侧 然后div也给一个左浮动 float:left ；让其div浮动到图片的右侧（未知总的div的宽度 不建议使用右浮动）这样定位就完成了 下一步设置字体的自动换行 word-wrap:break-word;word-break:break-all 然后直接设置margin就行了 ...

根据 CSS2中文手册 word-break版本：IE5+专有属性 继承性：有 语法：word-break : normal | break-all | keep-all 取值：normal:默认值,允许在词间换行 break-all:该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本 keep-all:与所有非...

文字区域 以上方式已经按照你所说的，左边是图片，右边是文字，文字自动换行，并且环绕图片实现效果；主要标签有：vertical-align:middle;使其让图片与文字对齐，float:left设置一个图片的靠左对齐方式；你可以测试一下效果，希望对你有所帮助

1.先输入：，建立一个主框架，如下图红框所示；2.设置框架的样式，根据需要设置即可，如下图红框所示，代码如下： .header{ width: 960px; /*这个div根据你写的替换就行了*/ height: 40px;margin: 5px auto;background-color: white; /*没用你去掉就行*/ } 3.然后嵌套图片：，如下...

在CSS中，控制文字换行的方式有多种。可以通过设置word-wrap属性、white-space属性或者利用HTML标签如 来实现文字换行。详细解释：1. word-wrap属性：word-wrap属性允许长单词或URL跨越多行。当设置为“break-word”时，如果一行文本中的单词太长以至于无法在当前行内完整显示，它会自动折行到...

4、图在左边。文字右边。下面是源代码：南天门永远的橘子！--.orange{width：300px；}.picadd{float：left；width：80px；}--南天门永远的橘子。在这里写下了很多很多的字。南天门永远的橘子。css怎么让图片和文字在一行1、你上传的图片看不清楚呀，建议发个高清的截图呢。这里面是内容因为文字是用...