ホームページ > 記事 > ウェブフロントエンド > HTMLで画像の表面に文字を入れる方法

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

青灯夜游オリジナル: 2021-02-22 11:36:2832923ブラウズ

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="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>

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 サイトの他の関連記事を参照してください。

html5 css3 html Float class position margin background

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTMLのマージントップは何を意味しますか次の記事：HTMLのマージントップは何を意味しますか

続きを見る