使用top 、right、bottom、left定位图像中的文本
实例代码；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
margin:0;
padding:0;
}
div.container{
position:relative
height:300px;
width:400px;
border:2px solid red;
}
img{
opacity:0.3;
width:400px;
height:300px;
}
div.d1{
position:absolute;
font-size:30px;
top:0;
left:0;
}
div.d2{
position:absolute;
font-size:30px;
bottom:0;
left:0;
}
div.d3{
position:absolute;
font-size:30px;
right:0;
top:0;
}
div.d4{
position:absolute;
font-size:30px;
bottom:0;
right:0;
}
div.d5{
position:absolute;
font-size:30px;
top:45%;
width:100%;
height:auto;
text-align:center;
}
</style>
</head>
<body>
<h1>图像文本实例</h1>
<div class="container">
<img src="img/R-C.jpeg" alt="dwoke" ></img>
<div class="d1">上左</div>
<div class="d2">下左</div>
<div class="d3">上右</div>
<div class="d4">下右</div>
<div class="d5">居中</div>
</div>
</body>
</html>
运行效果：
评论