使用定位來寫的,首先一個大盒子裝著圖片,
然後一個盒子裝著頭像和文字,把裝著頭像和文字
的盒子根據裝著圖片的盒子進行定位就可以了,
像這樣的其實很簡單的,要多思考和分析
代碼,要注意圖片你要自己放圖片,和修改圖片路徑
<!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>
Ⅱ css怎麼在圖片上添加文字
先設置一個div並插入圖片,設置這個div相對定位。
再第一個div里插入第二個div設置絕對定位,並輸入文字即可。
Ⅲ html+css怎麼在圖片上添加文字
要在圖片上顯示文字,還要在放大縮小的時候文字不到處亂跑,這個就要用盒模型裡面的大盒子套小盒子的方法了。下面舉個小例子給你看看。
html大致樣子:
<body>
<div id="box1">
<div id="box2">
<img src="https://www..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看起來眼花繚亂的。但只要做好了注釋,還是分得清楚的啦,主要是這樣弄看起來頁面整齊一點。
Ⅳ 如何用手機在圖片上加入文字
工具/原料:美圖秀秀手機版。
1、首先在我們的手機桌面上找到美圖秀秀並點擊它。
Ⅳ word中怎麼在圖片上添加文字的兩種方法
word中在圖片上添加文字的方法
例如:
方法一:
步驟一:插入-文本-文本框
步驟二:形狀填充-無填充顏色形狀輪廓-無輪廓
方法二:
1、利用的是圖片的文字環繞方式,首先插入一張圖片;
2、然後雙擊圖片,打開圖片的格式樣式選項;
3、找到圖片的版式選項卡,然後看到裡面有一個襯於文字下方;
4、選擇它,並確定,會看到文字在圖片上面,然後你就可以任意的在圖片上面輸入文字了
Ⅵ 如何在圖片中插入文字
可在office的word、ppt中進行如下操作。 1.插入圖片》圖片上右鍵,彈出菜單選設置圖片格式》板式標簽》浮於文字上方,在圖片上畫文本框(文本框在繪圖工具欄上)》在文本框內輸入文字。2.設置文本框透明:在文本框邊線上右鍵,彈出菜單選「設置文本框格式」,填充下顏色選「無填充顏色」,線條下顏色選「無線條顏色」。3.左鍵點文本框邊框,按住Ctrl點圖片,右鍵》彈出菜單選「組合」,就可以把字與畫固定了。
Ⅶ 怎麼在圖片中加入文字
普通的做圖軟體就可以,如Photoshop, Fireworks,還有windows自帶的畫圖板(開始-所有程序-附件中)都可以. 例如在畫圖板中:在左側選擇工具"A"在需要插文字的地方拉一個框,插入文字,定義字型大小,顏色,保存即可.
如果沒有(或不會用)這些軟體, 還有一個笨的方法:啟動Word, 新建一個文檔, 點擊菜單項「插入/圖片/來自文件」, 選定欲轉換的圖片文件後單擊〔插入〕。然後再用文本框或藝術字插入文字,將原圖片與插入的文本框或藝術字組合(一定要組合).
直接點擊「文件/另存為」, 選擇保存類型為「Web頁」, 輸入文件名及保存路徑後單擊〔保存〕, 此Word文檔便被轉換為HTML文件, 同時, 該HTML文件中包含的圖片文件也會被轉換為JPG或GIF格式。假設轉換成的「Web頁」的保存文件名為doc1.html, 那麼, 在文件doc1.html所在文件夾中有一個名為doc1.files的子文件夾, 轉換後的圖片文件即保存在此文件夾中, 其文件名為imagexxx.gif或imagexxx.jpg, 至於其格式究竟是GIF格式還是JPG格式, 則由圖片的顏色決定, 如果圖片是256色以上的, 則轉換後的格式為JPG格式, 否則為GIF格式。