Question

我刚刚创建了一个简单的即将推出的页面，其背景图像使用css：

body{
   background-image: url(FreeVector-Fresh-Beer.jpg);
   background-repeat: no-repeat;
   background-size: cover;  
}

这里是html：

<figure>
        <img class="img-responsive" src="Craft-Beer-SA-min.png" alt="Chania">
</figure>
<div class="paragraph" style="font-size:50px">
    <p>Our Website Is Brewing ! ! ! </p>
    <p>Coming To A Browser Near You. . .<br><a href="">info@craftbeersa.co.uk</a></p>           
</div>

如何使此背景图像响应？

Answer 1

试试这个

background-size:100% auto;

Answer 2

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>CraftBeerSa</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="main.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div class="text">
        <img src="Craft-Beer-SA-min.png" alt="">
        <div class="info">
            <p>WEBSITE COMING SOON</p>
        </div>
    </div>
</body>
</html>

CSS：

body{
    background-image: url(FreeVector-Fresh-Beer.jpg);
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    -wekit-background-attachment: fixed;
    -o-background-attachment: fixed;
    -moz-background-attachment: fixed;
}
.text{
    text-align:center;
}
img{
    margin-top:10%
}
.info{
    margin-top: 5%;
}
div p{
    font-size:5vw;
    color:#996633;
}


@media only screen and (max-width: 500px){
    .text img{
        width:100%;
    }
    img{
    margin-top:50%
    }
    .info{
        margin-top: 10%;
    }   
}

这绝对解决了一切。

Answer 3

body{    
    background: #222 url('FreeVector-Fresh-Beer.jpg') center center no-repeat;
    background-size: cover;
    height: 100%;
}

试试上面的代码。

Answer 4

您可以直接将背景应用于html元素，并使用background-size: cover确保它覆盖整个区域，不留任何间隙。

html { 
  background: #222 url('FreeVector-Fresh-Beer.jpg') no-repeat center center fixed; 
  background-size: cover;
}

否则，您可以确保在身体标签上声明height: 100%，这样身体也会占据浏览器的整个高度，并在那里应用背景。

body { 
  background: #222 url('FreeVector-Fresh-Beer.jpg') no-repeat center center fixed; 
  background-size: cover;
  height: 100%;
}

Background-size: cover确保在不扩展或拉伸图像的情况下覆盖整体;这自然意味着您的图像部分将被隐藏。但是，如果您只想展开它，即拉伸它，以获取整个区域，您可以使用background-size: 100% 100%。

一般情况下，您希望使用cover，您可以通过background-position（在中心，中心）确定哪个区域仍可通过简写属性在我的答案中显示（因此您始终会看到中心，垂直和水平）但它可能是：

水平：左|对|中心
垂直：顶部|底部|中心

如何使背景图像响应

4 个答案: