Question

我目前有我想要的结果。但是，我没有以最有效的方式完成它，并且没有响应。我希望页面看起来完全像这样，除了调整窗口大小时，元素不会出现异常。

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Home</title>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/components/button.min.css">
        <link rel="stylesheet" type="text/css" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700" rel="stylesheet">
    </head>
    <body>
        <div class="image">
            <div class="container">
                <div class="imgContent">
                    <h1>Quer oferecer nossos vinhos em seu restaurante ou evento?</h1>
                    <div class="button">
                        <button class="massive ui inverted basic button">Entre em contato</button>
                    </div>
                    <p>Nosso objetivo e trazer para o mercado braileiro o vinho dos pequenos produtores, aqueles que utilizam, principalmente, as uvas de suas proprias terras e que fazem o vinho com paixao, sequindo a tradicao familiar, que e aperfeicoada e passada de geracao em geracao.</p>
                </div>
            </div>
        </div>

        <div class="content">

        </div>
    </body>
</html>

CSS

/*START BG IMG*/
.image {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(images/home.jpeg);
  background-position: 50% 100%;
  background-size: cover;
}

.image h1 {
  font-family: "Playfair Display";
  color: #fff;
  font-size: 60px;
  margin-right: 56%;
}

.image p {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 300;
  color: #fff;
  font-size: 20px;
  margin-right: 70%;
  line-height: 150%;
}

.button {
  margin: 20px 0;
}

.imgContent {
  padding-top: 125px;
}


/*END BG IMG*/

.content {
  position: absolute;
  top: 100%;
  width: 100%;
  height: 200px;
}

Answer 1

＆＃34;除了窗口调整大小＆＃34;

您可以使用@media screen and (min-width: 1200px) {来控制窗口调整大小设计。

如果您希望自己的图片具有背景，为什么不使用body { background-image:？

使全屏图像内容响应并占据屏幕左对齐的1/3

1 个答案: