文字如何在圖片上顯示
文字在圖片上方顯示有兩種方法。
一個是設定容器的background-image:url(path);
缺點：圖片信息顯示不完整的現象存在。原因：圖片的寬高大於容器設定的寬高。需要完整顯示信息需要對容器進行體行調整。
在容器div內使用img標籤寫入一張圖片,設置圖片的width=「100%」 height=「100%」，注意：根據圖片的寬高比例進行等比縮放。
然後再寫入div 設定父容器的div的index的值爲n(一般設爲1)，現有容器div容器z-index爲n+1。此時可在新容器在進行容器設置放入，文字圖片的設置。
代碼演示如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:400px;
height:600px;
border:1px solid pink;
position:fixed;
left:0px;
right:0px;
top:0px;
bottom:0px;
margin:auto;
}
.A{
/* height:25px;
line-height:25px; */
font-size:10px;
background-color:lightgray;
clear:both;
color:green;
margin:10px;
border:1px solid lightgray;
padding:5px;
float:left;
}
.B{
/* height:25px;
line-height:25px; */
font-size:10px;
background-color:pink;
color:black;
clear:both;
margin:10px;
border:1px solid mediumseagreen;
padding:5px;
float:right;
}
</style>
</head>
<body>
<div style="position:relative; z-index:1">
<img src="../003圖片的使用/img/19.jpg" width="100%" height="100%">
<div style="position:absolute; left:0px top:0px; z-index:2">
<!--設定漂浮,顯現對話的效果，注意span根據內容設定的行內元素，設定爲浮動可修改font-size的默認值21px
當設置好height時，應該設置line-height等於height，目的是文字垂直居中,水平居中固定因爲span容器根據文字設寬度-->
<span class="A">Good morning!</span>
<span class="B">Good morning!</span>
<span class="A">What's your name?</span>
<span class="B">Sorry to forget to introduce myself. I'm A.</span>
<span class="A">Nice to meet you, A. I'm B.</span>
<span class="B">How do you do?</span>
<span class="A">Thank you for asking, I'm fine.</span>
<span class="B">as well as you.How about going to cinema? </span>
<span class="A">You name the place and time. I'm okay.</span>
<span class="B">Okay, let's go!</span>
</div>
</div>
</body>
</html>
顯示效果如下：
