使 bg 图像全宽并滚动以查看图像的其余部分答案

【问题标题】：Make bg image full width and scroll to view rest of image使 bg 图像全宽并滚动以查看图像的其余部分
【发布时间】：2019-02-07 18:37:28
【问题描述】：

我有一张想用作网页背景的图片。我需要图像是浏览器的 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 ;
}

HTML

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

    </body> </html>

感谢任何帮助。

【问题讨论】：

你可以用<img src="path"/>代替背景图片。

标签： html css

【解决方案1】：

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

.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>

【讨论】：

必须将 width: 100%; 添加到 .bg img {} 以使其适用于我的图像。感谢您在这里的帮助

【解决方案2】：

你可以使用 img 标签：

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

并将他的位置设置为固定：

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

【讨论】：

这仍然不允许我滚动查看图像的其余部分。