Web フォントが image_html/css_WEB-ITnose の中央に浮く

プロジェクトに取り組む過程で、画像を背景として使用し、画像の中央にフォントを表示する必要があることに遭遇しました。

私は 2 つの方法を試しました:

最初の方法は、div の属性を相対に設定し、ボックスの位置を固定し、画像を div ブロック内に配置することです。

フォントを格納するdiv内に別のdivを設定し、z-indexを2に設定し、画像を下に、フォントを上に配置し、フォントボックスの属性を絶対配置(絶対配置)に設定します。

このようにして、画像に対するフォントのオフセットを設定できます。具体的なコードは次のとおりです:

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

欠点: フォントが可変の場合、オフセット位置を設定するのが困難です。画像は適応性がなく、ブラウザによって効果が異なります

2 番目の方法は、画像を背景として使用し、フォントを中央に表示することです。

具体的なコードは次のとおりです:

#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>