HTML代码块
<body>
<div class="hand1">
<img src="img/hand.jpg" alt="">
<div class="text1">
<p>HELLO WORLD!</p>
</div>
</div>
</body>
css代码块
img{
width:100%;
filter:blur(3px)
}
.hand1 .text1{
position:absolute;
z-index:1;
left:42%;
top:42px;
}
.hand1 .text1>p{
font-size: 24px;
color:#fff;
}
图片中fiter:blur(3px)是设置高斯滤镜,把图片变模糊
设置文字绝对定位,是因为绝对定位会脱离默认文档流,再设置z-index是使文字显示在图片之上,这里必须设置高(top),居中文字使用left:50%。