CSS 基础学习-249 css使用不同的属性来创建背景图像

由 hrs, 23 十月, 2023

您可以在 <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>

运行效果：

bj image

 

标签

评论