使bg图像全宽，滚动以查看图像的其余部分。

Question

我有一个图像，我想使用作为我的网页背景。我需要该图像的浏览器的100%宽度，然后，我想要它，以便您可以滚动，以看到其余的图像。

我所使用的图像比更宽(因此需要滚动)。

我所使用的所有东西都会使图像变宽，但不会滚动，所以您无法看到完整的图像。

这使得图像具有完整的宽度，但只有在相同的div标记( CSS )中才能看到。

body, html{
    margin: 0;
    height: 100%;
}
.bg {
    background-image: url("Assets/Images/background.png");
    width: 100%;
    background-position: fixed;
    background-repeat: no-repeat;
    background-size: cover ;
}

<!DOCTYPE html> <html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="bg">
        </div>

    </body> </html>

任何帮助都是非常感谢的。

Answer 1

一种方法是使用两个部分:一个用于背景，另一个用于内容。

​

.bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;  
}
.bg img {
  max-width: 100%;
  width: 100%;
  height: auto;
}
.content {
  color: white;
}

<div class="bg">
  <img src="https://images.unsplash.com/photo-1549416878-30862a3e49e7" alt="">
</div>
<section class="content">
  <h1>Hello World</h1>
  <p>Bacon ipsum dolor amet fatback shoulder meatloaf capicola, ground round cupim sausage. Sausage pork loin pastrami pork belly biltong, spare ribs ball tip doner leberkas pork filet mignon bacon chicken t-bone rump. Tri-tip jerky ball tip brisket alcatra jowl pork t-bone strip steak doner venison andouille drumstick. Beef ribs frankfurter ball tip chuck ham hock strip steak cow sirloin meatloaf. Capicola hamburger pork belly pancetta ham turducken pastrami, cow meatball ribeye spare ribs. Burgdoggen sausage porchetta, kielbasa ham hock pancetta strip steak sirloin meatloaf shank ribeye.

Cupim drumstick swine pork sirloin rump pig doner fatback. Sausage beef jowl pork chop landjaeger buffalo cow short loin corned beef bresaola. Sausage t-bone kielbasa turducken hamburger, jerky tri-tip brisket. Spare ribs tenderloin buffalo, biltong sausage beef ribs jowl pancetta pork chop prosciutto cupim shankle. Prosciutto drumstick kielbasa, bresaola pastrami flank pig pork loin. Prosciutto chicken sausage pig bresaola, sirloin strip steak tenderloin flank short loin boudin drumstick.</p>
</section>

​

Answer 2

您可以使用img标记：

<body>
    <img class="bg" src="Assets/Images/background.png" alt="background">
</body>

把他的位置定下来：

img.bg {
width: 100%;
position: fixed;
}