您可以在 <div> 上使用不同的背景属性来创建 bj Image（带有文本的大图像），并将其放置在您希望的位置上。
实例代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
.body{
margin:0;
font-family:Arial,Helvetica,sans-serif;
}
.bj-image{
background:url(img/bj.jpg) no-repeat center;
background-size:cover;
height:500px;
position:relative;
}
.bj-text{
text-align:center;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:white;
}
</style>
</head>
<body>
<div class="bj-image">
<div class="bj-text">
<h1>我是比尔盖茨</h1>
<h3>我是一位摄影师</h3>
<button>聘请我吧</button>
</div>
</div>
<p>页面内容..</p>
<p>请注意，这项技术会将使图像响应：请调整浏览器窗口的大小来查看效果。 </p>
</body>
</html>运行效果：
评论