你的位置:首页 > 网页设计

[网页设计]web字体浮在图像中央


在做项目的过程中遇到了需要将图像作为背景,将字体显示在图像中央需求。

尝试了两种做法:

第一种方法为设置一个div设置属性为relative固定这个框的位置,将图片铺在div块里。

在div再设一个div存放字体,z-index设置为2,及图片在下面,字体在上面,字框的属性设置为absoulte(绝对定位)。

这样就可以设置字体对于图像的偏移,具体代码如下:

 <div" style="position: relative;" >  <img src="http://www.cnblogs.com//images/mobile/mobile1.jpg" />  <div style="position: absolute; z-index: 2; left: 45%; top: 45%">字体</div></div>

缺点:如果字体是可变的,则不好设置偏移的位置。图像也不是自适应,在不同的浏览器中效果也不相同

第二种方法为将图像作为背景,字体居中显示。

具体代码如下:

<style> #text{  background: url(/images/mobile.jpg);  filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";  -moz-background-size: 100%100%;  background-size: 100%100%;} #textfont{
text-align:center }

<div id = "text" style ="width : 100px ;height:100px">  

    <div style ="text-align:center; line-height:100px; " >字体</div>

</div>