CSS3之定位图片文本

代码：
<!DOCTYPE html>
<html class="no-js"> 
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>demo</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
        	*{
        		margin:0;
        		padding:0;
        	}
			.wrapper{
				position: relative;
			}        	
        	img{
        		width:100%;
        		height:400px;
        		opacity: 0.7;
        	}
        	.topleft{
        		position: absolute;
        		top:10px;
        		font-size:30px;
        		left: 5%;
        	}
        	.topright{
        		position: absolute;
        		top:10px;
        		font-size: 30px;
        		left: 90%;
        	}
        	.center{
        		text-align: center;
        		font-size:30px;
        		position: absolute;
        		left:0;
        		top:50%;
        		width:100%;
        	}
        	.botleft{
        		position: absolute;
        		font-size: 30px;
        		bottom: 5%;
        		left:5%;

        	}
        	.botright{
        		position: absolute;;
        		font-size: 30px;
        		bottom: 5%;
        		left: 90%;
        	}
        </style>
    </head>
    <body>
        <div class="wrapper">
        	<img src="./src/img/1.jpeg" alt="">
        	<div class="topleft">左上角</div>
        	<div class="topright">右上角</div>
        	<div class="center">文字居中</div>
        	<div class="botleft">左下角</div>
        	<div class="botright">右下角</div>
        </div>
    </body>
</html>
效果：
CSS3之定位图片文本

猜你喜欢
