HTML中，怎么在图片的下面加入文字啊？ 在HTML中，怎么在图片上添加文字？
html\u4e2d\u600e\u4e48\u8ba9\u6587\u5b57\u5728\u56fe\u7247\u7684\u4e0a\u9762\uff1f1\u3001\u5728div\u91cc\u9762\u4e66\u5199\u4e86\u4e00\u4e9b\u6587\u5b57\uff0c\u7136\u540e\u60f3\u8981\u5728\u653e\u5165\u4e00\u5f20\u56fe\u7247\u3002
2\u3001\u9996\u5148\uff0c\u6211\u4eec\u5e94\u8be5\u5148\u7ed9div\u8bbe\u7f6e\u5bbd\u5ea6\u548c\u9ad8\u5ea6\uff0c\u4fdd\u8bc1\u6587\u5b57\u6709\u4e00\u4e2a\u8303\u56f4\u3002
3\u3001\u7136\u540e\u901a\u8fc7background\u7ed9div\u6dfb\u52a0\u4e00\u5f20\u56fe\u7247\u4f5c\u4e3a\u5b83\u7684\u80cc\u666f\u3002
4\u3001\u901a\u8fc7url()\u6765\u8fde\u63a5\u56fe\u7247\uff0curl\u91cc\u9762\u653e\u7f6e\u7684\u5c31\u662f\u80cc\u666f\u56fe\u7247\u7684\u8def\u5f84\u3002
5\u3001\u653e\u4e00\u5f20\u56fe\u7247\u7528\u4f5c\u80cc\u666f\uff0c\u6ce8\u610f\uff0c\u8def\u5f84\u8981\u5199\u5bf9\u3002
6\u3001\u4fdd\u5b58\u4e4b\u540e\u6587\u5b57\u5c31\u4f1a\u8986\u76d6\u5728\u56fe\u7247\u7684\u4e0a\u9762\u4e86\uff0c\u800c\u5982\u679c\u4f7f\u7528img\u6807\u7b7e\uff0c\u5219\u6ca1\u6709\u8fd9\u79cd\u6548\u679c\u3002
\u4e00\u79cd\u65b9\u5f0f:\u76f4\u63a5\u5c06\u8fd9\u4e2a\u56fe\u7528ps\u5904\u7406\uff0c\u8fd8\u6709\u4e00\u79cdhtml\u91cc\u9762\u6709\u5c42\u7ea7\u4ee3\u7801\uff0c\u4fee\u6539\u4ee3\u7801\u5c06\u5b57\u8fd9\u4e00\u5c42\u653e\u5728\u56fe\u7247\u4e0a\u9762
使用定位来写的，首先一个大盒子装着图片，
然后一个盒子装着头像和文字，把装着头像和文字
的盒子根据装着图片的盒子进行定位就可以了，
像这样的其实很简单的，要多思考和分析
代码，要注意图片你要自己放图片，和修改图片路径
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>图片上放文字</title>
<style type="text/css">
html,body{
margin:0;
}
.auto-img{
display: block;
width:100%;
}
.box{
width:100%;
margin-top: 50px;
}
.box-cent{
width:50%;
margin:0 auto;
position: relative;
}
.texbox{
position: absolute;
width:50%;
line-height: 80px;
background-color: #0f0;
text-align: center;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box">
<div class="box-cent">
<img class="auto-img" src="images/000.jpg"/>
<div class="texbox">我是用来装头像和文字的盒子</div>
</div>
</div>
</body>
</html>
在图片后面加个<br>标签，然后直接写文字，如果想将文字覆盖在图片上就用position定位
前端代码看看
绛旓細浣跨敤浠ｇ爜鐨勬柟娉曪紝鍦ㄥ浘鐗涓婂姞瀛鎬庝箞鍋氬埌鍛 鍦html鏂囦欢涓紝鍏堝缓绔嬩竴涓猟iv锛岀劧鍚庡湪閲岄潰璁剧疆涓涓浘鐗囧拰鏂囧瓧h1锛屽鍥炬墍绀 鐜板湪鎵撳紑鍚庣殑鏍峰紡鏄繖鏍风殑锛屽鍥撅紝鍥剧墖鍦ㄤ笂锛屾枃瀛楀湪涓 鐒跺悗瀵筯1杩涜绠鍗曚慨楗帮紝瀵规枃瀛楀ぇ灏廸ont-size鍜屾枃瀛楅鑹瞔olor鍔犱互淇グ 濡傚浘鎵浠ユ晥鏋滐紝鐜板湪鏄繖鏍风殑锛岃繖鏍峰緟浼氬皢瀛楃Щ鍔ㄥ埌鍥句笂闈㈡椂锛屽瓧...
绛旓細鎶婂浘鐗囪缃负鑳屾櫙鍥剧墖锛鐒跺悗鍔犱笂鏂囧瓧灏卞彲浠ヤ簡 <style> .img1{ width:200px;height:200px;background-image:url("img/1.jpg");} </style> <div class="img1">鍥剧墖鍔鏂囧瓧</div>
绛旓細鍏跺疄杩欏彧闇涓涓猟iv,鍥剧墖鍙互浣滀负鑳屾櫙璁鍦ㄤ笅闈 <div class="LOGO">缃戠珯鏍囪瘑</div> <style> .logo { width:355px; height:45px; background:url(../images/logo.jpg) no-repeat;} </style>
绛旓細3銆娣诲姞鍥剧墖鐨鎻忚竟鏁堟灉鏈変袱绉嶆柟娉曪紝瀵鍥剧墖娣诲姞鎻忚竟鎴栬呮槸缁欏闈㈢殑鐩掑瓙濂椾釜鎻忚竟锛屽厛鐪嬬粰鍥剧墖娣诲姞鎻忚竟锛屾牴鎹鍥句唬鐮佸氨鏄洿鎺ュ湪img鍥剧墖鏍囩閲屾坊鍔涓婃弿杈筨order銆4銆佸鍥炬坊鍔犱簡鎻忚竟鍚庣殑鍥剧墖鏁堟灉銆5銆佹兂瑕佹敼鍙樺浘鐗囩殑鎻忚竟澶у皬浠ュ強棰滆壊锛屾牴鎹浘绀轰唬鐮佸湪杩欓噷淇敼銆6銆佺劧鍚庡鏋滄槸鍦╠iv鐩掑瓙娣诲姞鎻忚竟鏁堟灉鏃讹紝鍜岃窡鍦╥mg...
绛旓細div div img+p+p div div img+p+p div div
绛旓細1銆佸浘鍍忛摼鎺 鍥剧墖瓒呴摼鎺ュ拰鏂囧瓧瓒呴摼鎺ユ槸涓鏍风殑锛屽湪鍥惧儚涓婃彃鍏ラ摼鎺ワ細鐐瑰嚮鍥剧墖锛岃烦杞〉闈細<a></a>涔嬮棿鎻掑叆<img/>鍏冪礌銆傚锛<a href="瓒呴摼鎺ュ湴鍧"><img src="璺緞" alt="鏇夸唬鏂囨湰"></a>銆傦紙濡傚浘锛2銆佸眬閮ㄩ摼鎺 鍦ㄦ煇绉嶆儏鍐涓嬶紝鎴戜滑涓嶅笇鏈涙暣寮鍥剧墖鍔閾炬帴銆傚笇鏈涚殑鏁堟灉鏄細鐐瑰嚮鍥剧墖鏌愪釜鍖哄煙锛岄摼鎺...
绛旓細浣犵湅鐨勮繖涓〉闈㈡槸 CSS 绂呮剰鑺卞洯銆娣诲姞涓嬫媺鑿滃崟锛屽彲浠ヤ娇鐢ㄧ涓夋柟UI搴擄紝渚嬪 bootstrap 涓殑 dropdown 缁勪欢瀹炵幇.鍏蜂綋缁勪欢鐨勯厤缃綘鍘诲畼缃戠湅鐪嬪氨琛屻俤ropdown
绛旓細html鏂囦欢涓庝箞鎻掑叆鍥惧儚 宸ュ叿/鍘熸枡 dreamweaver 鏂规硶/姝ラ 缃戦〉鐨勫垱寤轰负浜嗕竴浜涘繀瑕佹垜浠渶瑕佹坊鍔犱竴浜涘浘鐗囷紝鐜板湪鎴戜滑灏卞紑濮娣诲姞鍥剧墖 绗竴绉嶆柟娉曪細鐢╠reamweaver杞欢鎻掑叆鍥剧墖鎵撳紑dreamweaver杞欢锛岀偣鍑绘彃鍏ワ紝閫夋嫨鍥惧儚锛屽鍥 1銆佸湪绔欑偣鏂囦欢澶涓嬮潰閫夋嫨瑕佹彃鍏ョ殑鍥惧儚锛屾绔欑偣鐩綍鏄闈傚鍥 2銆侀夋嫨纭畾鍚庝細璺冲嚭浠ヤ笅鐨...
绛旓細涓婇潰鏄釜渚嬪瓙 涓嬮潰鐨勪唬鐮佽В閲 锛歮argin-left:100px;灏辨槸璺濈鑳屾櫙灞傚乏杈圭殑璺濈涓100鍍忕礌锛宮argin-top:50px; 灏辨槸璺濈鑳屾櫙灞備笂杈圭殑璺濈涓50鍍忕礌锛涘鏋滀綘鎯虫妸鍥炬斁鍒板乏涓嬫柟鐨勫湴鏂癸紝灏辩敤margin-left:100px;鍙宠竟鐨勮瘽灏辩敤margin-right:100px;浠ｇ爜绗竴琛屾墦鎷彿鐨勫湴鏂瑰氨鏄斁鍥剧墖閾炬帴鐨 鑷繁鎷垮幓鍐嶇◢鍔犵悽纾紝...
绛旓細鐩稿璺緞锛氬鏋滄槸缃戠珯鐨勮瘽锛屽垯涓涓嬮潰鐨勶細img src=images/tupian.jpeg/>鐩稿璺緞:濡傛灉鏄綉绔欙紝鍒欏涓:灏嗚繖涓html鏂囦欢涓巌mages鏀惧湪鍚屼竴涓洰褰曚腑:灏嗘鍥剧墖涓巋tml鏂囦欢鏀惧湪鍚屼竴涓洰褰曚腑:鏍囩涓紝杈撳叆html浠ｇ爜锛歩mg src="small3.png"/>銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃娣诲姞鐨勬湰鍦鍥剧墖鐨璺緞鏄浉瀵硅矾寰...
