在做项目的过程中遇到了需要将图像作为背景，将字体显示在图像中央需求。
尝试了两种做法：
第一种方法为设置一个div设置属性为relative固定这个框的位置，将图片铺在div块里。
在div再设一个div存放字体，z-index设置为2，及图片在下面，字体在上面，字框的属性设置为absoulte（绝对定位）。
这样就可以设置字体对于图像的偏移，具体代码如下：
<span style="color: #0000ff;"> <<span style="color: #800000;">div<span style="color: #ff0000;">" style<span style="color: #0000ff;">="position: relative;" <span style="color: #0000ff;">> <span style="color: #0000ff;"> <<span style="color: #800000;">img <span style="color: #ff0000;">src<span style="color: #0000ff;">="/images/mobile/mobile1.jpg" <span style="color: #0000ff;">/> <span style="color: #0000ff;"> <<span style="color: #800000;">div <span style="color: #ff0000;">style<span style="color: #0000ff;">="position: absolute; z-index: 2; left: 45%; top: 45%"<span style="color: #0000ff;">><span style="color: #000000;">字体<span style="color: #0000ff;"></<span style="color: #800000;">div<span style="color: #0000ff;">> <span style="color: #0000ff;"></<span style="color: #800000;">div<span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
缺点：如果字体是可变的，则不好设置偏移的位置。图像也不是自适应，在不同的浏览器中效果也不相同
第二种方法为将图像作为背景，字体居中显示。
具体代码如下：
#text{
background: url(/images/mobile.jpg);
filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
-moz-background-size: 100%100%;
background-size: 100%100%;
}
<div id = "text" style ="width : 100px ;height:100px">
<div style ="text-align:center; line-height:100px; " >字体</div>
</div>
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
998
收藏
