向下滾動更改背景圖像

Question

我想在向下滾動要顯示的新圖像時執行此操作。我已經添加了兩個圖像。我嘗試了“ https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_bg_change_scroll ”，其中包含兩個圖像，但發生了一些事情我的代碼錯了。我不知道為什么，但他們確實失敗了，我想在圖像 1 中的演示 function 和第二張圖像中的演示 1 的文本中使用他們的點擊按鈕。更清楚地說，我的意思是我想要的那些代碼要在圖像中，當我運行它時，它們會從圖像中向下顯示 go。

>

 <p id="demo">Top 5 Tv shows,is Prison Break,Wayward
> Pines,Mentalist,Lost,Usa shooter</p>
on the first image

<p id="demo1">Top 5 movies,is Prison Break,Wayward
> Pines,Mentalist,Lost,Usa shooter</p>
for the second image.

和

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Tv-Shows / Movies </title>
<style type="text/css">
.auto-style1 {
    margin-top: 0px;
}

body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

.bg-image {
  /* Full height */
  height: 50%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Images used */
.img1 { background-image: url("img_snow.jpg"); }
.img2 { background-image: url("img_girl.jpg"); }


/* Position text in the middle of the page/image */
.bg-text {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  font-size: 80px;
  border: 10px solid #f1f1f1;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 300px;
  padding: 20px;
  text-align: center;
}
</style>
</head>
<body>

<div class="bg-image img1"></div>
<div class="bg-image img2"></div>


<h1>Tv Shows<img alt="" height="591" src="image1.png" width="1024"></h1>


<p id="demo">Top 5 Tv shows,is Prison Break,Wayward Pines,Mentalist,Lost,Usa shooter</p>

<p id="demo1">Top 5 movies,is Prison Break,Wayward Pines,Mentalist,Lost,Usa shooter</p>


<button onclick="myFunction()">click me</button>
<button onclick="mySec()">click me</button>

<script>
function myFunction() {
  var x = document.getElementById("demo");
  x.style.fontSize = "25px"; 
  x.style.color = "red"; 
}
</script>
<script>
function mySec() {
  var x = document.getElementById("demo1");
  x.style.fontSize = "25px"; 
  x.style.color = "green"; 
}
</script>
<div class="bg-text">TEXT</div>
<img alt="" class="auto-style1" height="464" src="citycas.jpg" width="1355">

</body>
</html>

Answer 1

如果我理解正確，您想要做的是將演示的內容放在圖像上。

為此，只需將文本放在相關的div元素中：

<div class='container first-container'>
   <p>Top 5 Tv shows,is Prison Break,Wayward Pines,Mentalist,Lost,Usa shooter</p>
</div>
<div class='container second-container'>
   <p>Top 5 movies,is Prison Break,Wayward Pines,Mentalist,Lost,Usa shooter</p>
</div>

並在 CSS 中將背景放入每個容器：

/* Your reset part */
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

/* Elements */
.container{
  /* Full height */
  height: 50%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.first-container{
  background: url('img-1.jpg');
}
.second-container{
  background: url('img-2.jpg');
}

這里的一個例子： https://codepen.io/thomas-lamothe/pen/WNQjpmv

向下滾動更改背景圖像

問題描述

1 個解決方案

解決方案1
0 已采納 2020-04-26 11:42:19

向下滾動更改背景圖像

問題描述

1 個解決方案

解決方案1 0 已采納 2020-04-26 11:42:19

解決方案1
0 已采納 2020-04-26 11:42:19