Question

我的视差背景图片位于我想用作标题的div下。

以下是HTML：

<div id="header" class="text-center">
    <img src="media/logo.png">
</div>

<div class="parallax"></div>

<div id="content" class="jumbotron text-center">
    <!-- Content here  -->
</div>

<div class="parallax"></div>

这里是与之相关的CSS规则：

body {
    height: 100%;
}

.parallax {
    background-image: url("../media/Collage1.png
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 50%; 
}

Answer 1

body {
    height: 100%;
}

#header {
  position: fixed;
  width: 100%;
}

.parallax {
    background-image: url("https://cdn.pixabay.com/photo/2013/07/12/12/54/world-map-146505_960_720.png");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 0;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="header" class="text-center">
    <!-- <img src="media/logo.png"> -->
  <p>Lorem Ipsum</p>
</div>

<div class="parallax"></div>

<div id="content" class="jumbotron text-center">
    <!-- Content here  -->
</div>

<div class="parallax"></div>
</body>
</html>

我用过位置：固定在#header中也给出了宽度：100％；您还可以使用position：absolute;

Answer 2

将高度从50%更改为50px（或根据您的需要）

Answer 3

这将为您提供帮助。

.parallax {
  /* The image used */
  background-image: url("http://lorempixel.com/400/200/sports/");

  /* Set a specific height */
  min-height: 500px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}
.parallax-2 {
  /* The image used */
  background-image: url("http://lorempixel.com/400/200/sports/");

  /* Set a specific height */
  min-height: 500px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: top right;
  background-repeat: no-repeat;
  background-size: cover;
}

<header>
  <p>Scroll Up and Down this page to see the parallax scrolling effect.</p>

<div class="parallax"></div>


</header>
<div style="height:1000px;background-color:red;font-size:36px;padding:20px;color:white;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="parallax-2"></div>
<div style="height:1000px;background-color:blue;font-size:36px;padding:20px;color:white;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

如何将视差背景图像移动到标题div

3 个答案: