ホームページ > 記事 > ウェブフロントエンド > HTMLで画像の表面に文字を入れる方法
HTMLで画像の表面に文字を入れる方法
- 青灯夜游オリジナル
- 2021-02-22 11:36:2833037ブラウズ
html画像の表面にテキストを配置する方法: 1. "background-image" を使用して背景画像を定義します。 2. "img" を使用して画像を定義し、img ブロックとテキストを配置します。同じ div 内のブロックに配置し、position 属性を渡すと、絶対配置と相対配置を使用して画像とテキストの位置を設定できます。
このチュートリアルの動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。
方法 1: 画像を背景画像として使用します。つまり、background-image:url("....");
これは制御できます。ここ 背景画像の水平および垂直タイル:
background-repeat : none; タイルなし
background-repeat :repeat- x; Tile x 軸を横切る
- ##background-repeat :repeat-y; y 軸を横切るタイル
- background-repeat :repeat; 水平方向X 軸と垂直 Y 軸は両方とも並べて表示されます。これはデフォルトの状態でもあります
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div{
width: 100%;
height: 500px;
background-image:url(demo/img/5.jpg);
background-size:100%;
background-repeat:no-repeat;
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<div>
hello!
</div>
</body>
</html>レンダリング:
方法 2: img ブロックと text ブロックを同じ div に配置し、それらの間の位置を設定します。
たとえば、次のコードブロック:<div style="position:relative;"> <img src="...." / alt="HTMLで画像の表面に文字を入れる方法" > <div style="position:absolute; z-index:2; left:10px; top:10px"> haha </div> </div>実際の状況に応じて残りの位置を微調整してください~~例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div{
width: 100%;
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<div style="position:relative;">
<img src="demo/img/5.jpg" style="max-width:90%"/ alt="HTMLで画像の表面に文字を入れる方法" >
<div style="position:absolute; z-index:2; left:10px; top:10px">
haha
</div>
</div>
</body>
</html>
Position:
position:Absolute の相対属性値と絶対属性値の違いについては、ブラウザの位置を基準とした相対的な位置です。 例: 位置: 絶対; 左: 20 ピクセル; 上: 80 ピクセル; このコンテナは常にブラウザの左から 20 ピクセル、ブラウザの上から 80 ピクセルの位置に配置されます。 position:relative は、前のコンテナーを基準とした相対的な位置指定です。現時点では、左上を位置決めに使用することはできません。マージンを使用する必要があります。 例: 1 に固定値がある場合位置。 1 のスタイルは float: left; width: 100px; height: 800px; 2. スタイルは float: left;position:relative; margin-left: 20px; width: 50px; 2 位置は 1 の右側、距離は 120pxプログラミング関連の知識の詳細については、プログラミング ビデオ を参照してください。 ！
以上がHTMLで画像の表面に文字を入れる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。