Heim > Web-Frontend > HTML-Tutorial > web字体浮在图像中央_html/css_WEB-ITnose

web字体浮在图像中央_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:19:32
Original
1300 Leute haben es durchsucht

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

尝试了两种做法:

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

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

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

 <div" style="position: relative;" > <img  src="/images/mobile/mobile1.jpg" / alt="web字体浮在图像中央_html/css_WEB-ITnose" > <div   style="max-width:90%">字体</div></div>
Nach dem Login kopieren

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

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

具体代码如下:

#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>
Nach dem Login kopieren

 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage