Question

晚上好

我是html的新手，正在寻找解决方案，但未找到任何解决方案。因此，我想做的是固定背景，并在其上放置类似面板的内容，在该网站上处理其余部分，例如文本等。我有一个示例网站：https://420cheats.com 我不知道我是否正确，但我想我必须添加第二堂课，并以某种方式将其放在背景中

谢谢。

Ps：我将背景作为css文件中的一个类。

Answer 1

您需要将背景设置为固定，并创建一个DOM元素以放置在背景图片的顶部。

body {
	background: url('https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1507062474/hotel-everest-namche-nepal-mountain-lodge-MOUNTAIN1017.jpg?itok=g-S4SL9n') no-repeat fixed;
	background-size: cover;
	
}

div {
	padding: 20px;
	width: 400px;
	height: 1200px;
	background: rgba(0,0,0,.5);
}

<div>test</div>

Answer 2

您可以在您的body元素上设置固定的背景图像。 <body>和<html>标签都需要设置为100％的高度才能起作用。

body, html {
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('https://cdn.cnn.com/cnnnext/dam/assets/170407220921-07-iconic-mountains-pitons-restricted.jpg');
  height: 100%;
  background-attachment: fixed;
}

.content {
  background-color: rgba(204,204,204,0.5);
  width: 80%;
  margin: 20px auto 20px auto; /* top right bottom left */
  height: 1500px; /* remove this, just here to show that it works */
}

<div class="content">
  
   <h1>Content</h1>  
  
</div>

修复背景并将面板放在上面

2 个答案: