web字体浮在图像*_html/css_WEB-ITnose
程序员文章站
2022-04-14 08:17:53
...
在做项目的过程中遇到了需要将图像作为背景,将字体显示在图像*需求。
尝试了两种做法:
第一种方法为设置一个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部署 svg/woff/woff2字体 404错误_html/css_WEB-ITnose
-
2个网页调用同一个css,为什么有一个网页字体显示不出来_html/css_WEB-ITnose
-
请教一个CSS的问题,怎么样才能实现小字体也能抗锯齿啊?象DELL网站就完全没锯齿_html/css_WEB-ITnose
-
网页字体知识_html/css_WEB-ITnose
-
请问这是什么字体,帮写下CSS呗!!!_html/css_WEB-ITnose
-
鼠标悬浮在超链接上弹出提示框_html/css_WEB-ITnose
-
谷歌字体(Google Font)初探 [翻译自Google官方文档]_html/css_WEB-ITnose
-
中文字体在CSS中的表达方式_html/css_WEB-ITnose
-
请问在页面使用36px粗字体时,文字有粗有细是怎么回事?_html/css_WEB-ITnose
-
Dreamweaver的设计视图中可以看到背景图像,但一预览却看不到了_html/css_WEB-ITnose