A. HTML怎麼在圖片上添加文字,也就是圖片作為背景,代碼和圖像顯示如下
單純的html要實現你說的效果很難,必須html和css配合才可以,首先用css為需要設置背景的元素設置背景,然後用html寫文字等內容。附加一個簡單例子,希望幫到你。(其中1.jpg跟這個頁面在一個路徑)
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="Generator"content="EditPlus®">
<metaname="Author"content="">
<metaname="Keywords"content="">
<metaname="Description"content="">
<title>Document</title>
<styletype="text/css">
*{
margin:0;
padding:0;
}
.flower{
background:url("1.jpg")centercenterno-repeat;
position:relative;
width:100%;
height:100%;
}
table{
margin:0auto;
}
</style>
</head>
<body>
<divclass="flower">
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
</tr>
</table>
</div>
</body>
</html>
B. 如何用html在圖片上顯示文字
用js寫,先得到圖片的offsetLeft和offsetTop,然後寫個div層吧層定位到圖片的位置。層里寫字就行了
C. html+css怎麼在圖片上添加文字
第一步:我們需要准備一個圖像
作為一個例子,我想在深色背景的背景上放置白色文字。
第二步:將圖像和字母放在一個div元素中
將圖像和字母放在一個div標簽中。在示例中,將文字「萬里長城」放在p標記中。當然您可以使用標題標簽而不是p標簽,也可以使用span標簽。
1
2
3
4
<div class = "example" >
<img src="image/greatwall.jpg">
<p>萬里長城</p>
</div>
第三步:指定position屬性
為每個元素設置css的position屬性。
對作為父元素的div指定為position:relative,以及對包含該字元串的p標簽設置為absolute。img標簽不動。
把p標簽的位置設置為top:0; left:0。
為了把圖像放在橫向上,請指定為img標簽的寬度為width : 100%。
1
2
3
4
5
6
7
8
9
10
11
12
.example{/*父元素div*/
position: relative;/*相対定位*/
}
.example p {
position: absolute;/*絕対定位*/
color: white;/*文字設為白色*/
top: 0;
left: 0;
}
.example img {
width: 100%;
}
D. html+css如何在圖片上添加文字
可以。
以html為例,步驟:
一、在body中建立文字信息以及圖片內容,也就是在header中包含兩個同級,圖片和文字。
E. css怎麼讓文字顯示在圖片的上面
工具/材料:電腦。
css讓文字顯示在圖片上的操作步驟如下:
1、首先在div裡面書寫文字,然後放入1張圖片。
F. 網頁設計中如何讓把文字放在圖片上顯示
把圖片設為背景即可,以下是修改後的代碼<html>
<head>
<title>框架</title>
<style>
.father{
width:500px;
height:250px;
border:1px
solid
#f76f01;
background-color:#ffffff;
}.son1{
float:left;
font:12px;
height:
}
</style>
</head>
<body>
<div
class="father"><div
class="son1"
style="background-image:url(image/1.jpg);width:100%;height:50px">把此文字放在上面的粗條上</div>
</div>
</body>
</html>
G. html代碼中如何在圖片內輸入文字
把圖片當作背景。然後插入文字就行了。
如下:
<div style="background:url(pic001.jpg) no-repeat"><p>你想看見的文字</p></div>