web字体浮在图像中央_html/css

来源：动视网责编：小采时间：2020-11-27 16:26:31

web字体浮在图像中央_html/css

web字体浮在图像中央_html/css_WEB-ITnose:在做项目的过程中遇到了需要将图像作为背景，将字体显示在图像中央需求。尝试了两种做法：第一种方法为设置一个div设置属性为relative固定这个框的位置，将图片铺在div块里。在div再设一个div存放字体，z-index设置为2，及图片在下面，字体在上面，字框的

推荐度：

点击下载本文 文档为doc格式

导读web字体浮在图像中央_html/css_WEB-ITnose:在做项目的过程中遇到了需要将图像作为背景，将字体显示在图像中央需求。尝试了两种做法：第一种方法为设置一个div设置属性为relative固定这个框的位置，将图片铺在div块里。在div再设一个div存放字体，z-index设置为2，及图片在下面，字体在上面，字框的

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

尝试了两种做法：

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

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

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

  字体

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

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

具体代码如下：

#text{ background: url(/images/mobile.jpg); filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')"; -moz-background-size: 100%100%; background-size: 100%100%;} 字体

web字体浮在图像中央_html/css

推荐度：

点击下载本文 文档为doc格式

标签：图片字体 html

热门焦点

web字体浮在图像中央_html/css

web字体浮在图像中央_html/css

web字体浮在图像中央_html/css

最新推荐

猜你喜欢

热门推荐