html运行实例（css3_background_hero）-搜寻教程库

代码示例：（标识：css3_background_hero）

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.hero-image {
  background: url(/static/demo/images/tiyugongyuan.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}
</style>
</head>
<body>

<div class="hero-image">
  <div class="hero-text">
    <h1 style="font-size:50px">我是比尔盖茨</h1>
    <h3>我是一位摄影师</h3>
    <button>聘请我吧</button>
  </div>
</div>

<p>页面内容..</p>
<p>请注意，这项技术会将使图像响应：请调整浏览器窗口的大小来查看效果。</p>

</body>
</html>