0

我想创建一个网页，在整个滚动过程中，背景需要说同样的话。因此，网页的真实内容就像漂浮在背景上一样。

抱歉，我没有任何例子，但这就像苹果有时在展示他们的 iPhone 芯片时所做的那样：有一段时间，页面保持相同的电子电路背景，但芯片规格（如速度）不断出现和滚动

4

3 回答 3

1

您可以简单地使用：

body {
    background-image: url("...");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed; /* This is what makes the background seem to be staying in the same position */
 }

但是，如果背景很大，可能会导致滚动效果变慢。

于 2021-07-01T21:52:34.977 回答
1

应用于元素background-attachment: fixed;_body

于 2021-07-01T22:31:15.577 回答
0 

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
  width:100%;
  height:100%;
  margin:0px;
}
#img{
  width:100%;
  height:300%;
  z-index:-1;
  position:absolute;
}
#backgroundImage{
  width:100%;
  height:100%;
}
.ContentWindow{
  box-shadow: 5px 10px #888888;
  background-color: white;
  border-radius:5%;
  width:90%;
  padding:5%;
  margin:0px;
  margin-bottom:20%;
  
}
</style>
</head>
<body>
<div id="backgroundImage"> 
  <img id="img" src="https://homepages.cae.wisc.edu/~ece533/images/frymire.png">
    <div class="ContentWindow">
    Shrek: "Once upon a time, there was a lovely princess. But she had an enchantment upon her of a fearful sort, which could only be broken by love's first kiss. She was locked away in a castle, guarded by a terrible fire-breathing dragon. Many brave knights had attempted to free her from the dreadful prison, but none prevailed. She waited in the dragon's keep, in the highest room of the tallest tower, for her true love and true love's first kiss." [Laughing] Like that's ever gonna happen.
    [Paper Rustling, Toilet Flushes]
    Shrek: What a load of--
    [Toilet Door slams]
    Shrek hops out his outhouse and his routine like taking a mud shower and farting in his pool.
    [♪ All-Star By Smash Mouth Playing]
    </div>
    <div class="ContentWindow">
      Steve Harwell: ♪ Somebody once told me the world is gonna roll me, I ain't the sharpest tool in the shed. She was lookin' kind of dumb with her finger and her thumb in the shape of an "L" on her forehead. The years start comin', and they don't stop comin', fed to the rules and I hit the ground runnin', didn't make sense not to live for fun. Your brain gets smart but your head gets dumb. So much to do, so much to see, so what's wrong with takin' the backstreets. You'll never know if you don't go, you'll never shine if you don't glow. Hey, now, you're an all-star. Get your game on, go play. Hey, now, you're a rock star. Get the show on, get paid. And all that glitters is gold, only shootin' stars break the mold. It's a cool place, and they say it gets colder, you're bundled up now, but wait till you get older. But the meteor men beg to differ judging by the hole in the satellite picture. The ice we skate is gettin' pretty thin, the water's getting warm so you might as well swim. My world's on fire, how 'bout yours? That's the way I like it and I'll never get bored. Hey, now, you're an all-star. ♪
    [Shouting]
    Steve Harwell: ♪ Get your game on, go play. Hey, now, you're a rock star. Get the show on, get paid. And all that glitters is gold, only shootin' stars break the mold. ♪
    </div>
    <div class="ContentWindow">
    [Belches]
  Villagers: Go! Go!
  [Record Scrating]
  Steve Harwell: ♪ Go. Go. Go. Hey, now, you're an all-star. Get your game on, go play. Hey, now, you're a rock star, get the show on, get paid. And all that glitters is gold, only shootin' stars break the mold. ♪
  Villagers: Think it's in there? All right! Let's get it!
  Villager 1: Whoa. Hold on. Do you know what that thing could do to you?
  Villager 2: Yeah, it'll grind your bones for its bread.
  Shrek: [Laughs] Yes, well, actually, that would be a giant. Now, ogres-- they're much worse. They'll make a suit from your freshly peeled skin.
  Villager 3: No!
  Shrek: They'll shave your liver. Squeeze the jelly from your eyes! Actually, it's quite good on toast.
  Villager 3: Back! Back, beast! Back! I warn ya!
  [Gasping]
  Villager 3: Right.
    </div>
</div>

</body>

于 2021-07-01T21:55:24.330 回答