以下是織夢后臺添加方法，其他的平臺也是類似：
首先登陸網站后臺，如圖：
2.點擊普通文章，如圖：
3.隨便選擇一篇帶圖片的文章，如圖：
4.點擊源碼，如圖：
5.找到圖片，圖片前面一般都會有img的描述，然后再ait“”里面加入需要加入的內容即可，如圖：
可以在后臺給對應的圖片添加標題，在前臺圖片顯示的對應位置輸出下標題就可以。
可以在后臺給對應的圖片添加備注字段，在前臺圖片顯示的對應位置輸出下備注就可以。
使用定位來寫的，首先一個大盒子裝著圖片，
然后一個盒子裝著頭像和文字，把裝著頭像和文字
的盒子根據裝著圖片的盒子進行定位就可以了，
像這樣的其實很簡單的，要多思考和分析
代碼，要注意圖片你要自己放圖片，和修改圖片路徑
<!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>
要在圖片上顯示文字，還要在放大縮小的時候文字不到處亂跑，這個就要用盒模型里面的大盒子套小盒子的方法了。下面舉個小例子給你看看。
html大致樣子：
<body>
<div id="box1">
<div id="box2">
<img src="https://www.baidu.com/img/bd_logo1.png">
</div>
<div id="wenzi">這里是文字</div>
</div>
</body>
css文件：
#box1{
position:relative;
width:500px;
height:500px;
margin:0 auto;
}
#box2{
position:relative;
width:100%;
height:100%;
}
img{
position:relative;
clear:both;
width:100%;
height:100%;
}
#wenzi{
position:relative;
clear:both;
width:100%;
top:-50%;
text-align:center;
color:black;
font-size:2em;
}
效果圖片：
用這種方法有個好處，就是做響應布局的時候，或者用戶在瀏覽器上放大縮小的時候，網頁整體也跟著放大縮小，不會元素到處亂跑或者某個文字跑出來，這樣看起來整體感要強烈一點。
這種做法的不足之處：div盒子有點多，html代碼看起來比較臃腫，大盒子套著小盒子。做大頁面的時候一個htm看起來眼花繚亂的。但只要做好了注釋，還是分得清楚的啦，主要是這樣弄看起來頁面整齊一點。
html+css在圖片上添加文字有兩種方法如下：
1.添加一個DIV，采用絕對定位，圖片所屬DIV為基準
<div><img src="" alt="" />
<div>文字
</div>
</div>
第二種方法:圖片作為背景圖片
<div>wenzi
</div>
背景圖片現在有了，然后在上面寫上你需要寫的字就可以了。
相關推薦：