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 ;
}

HTML

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

    </body> </html>

感谢您的帮助。

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

Answer 2

您可以使用img标签：

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

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

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

使bg图像全宽并滚动以查看其余图像

2 个答案: