HTMLで画像の表面に文字を入れる方法-フロントエンドQ&A-php.cn

HTMLで画像の表面に文字を入れる方法

青灯夜游

リリース： 2023-01-03 09:24:18

オリジナル

33076 人が閲覧しました

html画像の表面にテキストを配置する方法: 1. "background-image" を使用して背景画像を定義します。 2. "img" を使用して画像を定義し、img ブロックとテキストを配置します。同じ div 内のブロックに配置し、position 属性を渡すと、絶対配置と相対配置を使用して画像とテキストの位置を設定できます。

HTMLで画像の表面に文字を入れる方法

このチュートリアルの動作環境: 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>

ログイン後にコピー

レンダリング:

HTMLで画像の表面に文字を入れる方法

方法 2: img ブロックと text ブロックを同じ div に配置し、それらの間の位置を設定します。

たとえば、次のコードブロック:

<div   style="max-width:90%">
　　<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>

ログイン後にコピー

HTMLで画像の表面に文字を入れる方法