Question

如何在HTML / CSS中执行此操作？（请查看图片）

Answer 1

这就是我为我的网站做的事情（实际代码几乎没有改变，所以CSS中有很多无用的东西。）你需要做的就是复制/粘贴这个文本并插入你图像的URL。

<!DOCTYPE html>
<html>
<head>
	<style>
.div1{
	border-style: hidden;
	background-image: url("yourImage.jpg");
	background-color: red;
	background-size: 100% 100%;
	position: absolute;
	right: 0px;
	left: 0px;
	top: 10%;
	z-index: -2;
	padding: 10%;
	margin:0px;
}
.div2{
	position: relative;
	top: 50%;
	background-color: rgba(153,194,255,0.8);
	z-index: 1;
	padding-right: 50px;
	padding-left: 50px;
	height:300px;
	width: 60%;
	min-width: 300px;
	margin: auto;
}

.myText{
	margin: auto;
	padding: 50px;
	text-align: center;
	font-size: 1.5em;
	font-family: Verdana,sans-serif;
	width: 80%;
	height: 100%;
}
	</style>
</head>
<body>
	<div class="div1"> 
	<div class="div2"><p class="myText">hey</p></div>
	</div>
	
</body>
</html>

下次，也许做一点点研究，但是嘿......偶尔会有人懒惰，对吧！？

如何在HTML中将一个图像放在另一个图像的顶部

1 个答案: