Question

我正在制作一个有幻灯片显示的网页。因为我希望它有一个淡入淡出（彩色图像颜色）。我决定让背景颜色为alpha-color，所以我需要做的就是将图像放在背后，淡入淡出将永远留在那里。

现在如何将图像放在背景后面？

body {
	text-align: center;
	background-image: url("http://i.imgur.com/jBqKhtV.png");
	background-repeat: no-repeat;
	background-position: center 1.5%;
	background-color: #141414
}

.logo {
	position: absolute;
	z-index: 11;
	width: 247px;
	top: 17px;
	margin-left: -112px;
}

.headline {
	display: inline-block;
	margin-top: 220px;
}

h1 {
	font-size: 10pt;
	font-family: Lucida Sans;
	color: grey;
	font-style: italic;
	font-weight: normal;
}

.underline {
	width: 630px;
	height: 1px;
	background-color: white;
	left: 0px;
	right: 0px;
	margin: auto;
	top: 270px;
	position: absolute;
	z-index: 12
}

.navigation {
	width: 630px;
	height: 60px;
	position: aboslute;
	z-index: 13;
	left: 0px;
	right: 0px;
	margin: auto;
}

h2 {
	margin-top: 30px;
	color: white;
	font-family: Lucida Sans;
	font-size: 15pt;
	float: left;
	margin-left: 65px;
	font-weight: normal;
}

.home {
	margin-left: 68px;
}

.slideshow {
	width: 1330px;
	height: 630px;
	position: absolute;
	z-index: -5;
	left: 0px;
	right: 0px;
	margin: auto;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" type="text/css" href="Home_Stylesheet.css">
</head>
<body>
	<center>
		<img src="http://i.imgur.com/DlXvHKb.png" class="logo">
	</center>
	
	<div class="headline">
		<h1>Cyprus Griptape Manufacturers</h1>
	</div>
	
	<div class="underline"></div>
	
	<div class="navigation">
		<h2 class="home">Home</h2>
		<h2>Store</h2>
		<h2>About Us</h2>
		<h2>Contact Us</h2>
	</div>
	
	<div class="slideshow">
		
	</div>
</body>
</html>

Answer 1

您想要的简单，最通用的解决方案是：

将滑块放在容器/包装器中，然后输入：

.slider-wrapper {
  position:relative;
  z-index: 0;
 }

将滑块的兄弟放在同一个容器中，然后输入：

.slider-wrapper .overlay {
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background effect of your choice here */
  z-index: 1;
  pointer-events: none 
  /* this lets pointer events through, to enable interacting with the slider */
 }

标记应该是这样的：

<div class="slider-wrapper">
    <div class="slider"> Your slider here </div>
    <div class="overlay"></div>
</div>

因此，您在滑块上放置了一个叠加层，具有所需的背景效果，与内容大小相同（由其他同级设置，滑块设置）并且不会捕捉任何{{1} }。这就是你想要的，对吧？

使用HTML / CSS将图片放在背景后面

1 个答案: