Question

.left左栏中没有显示背景图像。我已经将.left设置为CSS背景图像，但无济于事。有什么想法吗？我觉得它很小，很烦我。

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="row">
  <div class="column left">
  </div>
  <div class="column right">
    <i class="fa fa-unlock fa-2x" aria-hidden="true"></i>
    <h2> You're In </h2>
    <p> You deserve it. Unlock your welcome discount and be the first to know about leaked artwork & exclusive offers. </p>
    <h2> GET $20 NOW </h2>
<form class="omnisend-subscribe-form"><input type="text" class="omnisend-subscribe-input-email" placeholder="Email address" style="width: 100%; height: 50px; display: block; color: #a0a0a0; font-size: 16px; padding: 6px; border: 1px solid #cfcfcf; margin-bottom: 5px; outline-width: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;" /><input type="submit" value="I want my $20 off" style="width: 100%; height: 50px; display: block; color: #ffffff; font-size: 16px; padding: 8px; margin-top: 18px; background-color: #f47268; border-width: 0px; -webkit-border-radius: 0px; -moz-border-radius: 3px; border-radius: 0px; outline-width: 0px; cursor: pointer;" /></form>
    </div>
  </div>

 * {
  box-sizing: border-box;
}

.row {
  display: flex;
  border: 1px solid grey;
  align-items: center;
  }

.column {
  text-align: center;

}

 .left {
  width: 50%;
  background-image: url("https://cdn.shopify.com/s/files/1/0196/2898/2334/files/MU6.jpg?2930");
}

.right {
  width: 50%;
  padding: 10px;
}
  @media screen and (max-width: 600px) {
  .left {
    display: none;
  }
    .right {
      width: 100%;
    }
}

Answer 1

尝试在flex的子元素上指定No instance for (Eq Dir) arising from a use of ‘==’ • In the expression: x == Lft In the expression: if x == Lft then trace xs left else trace xs right In an equation for ‘trace’: trace (x : xs) (BNode b left right) = if x == Lft then trace xs left else trace xs right | 14 | trace (x:xs) (BNode b left right) = if x == Lft then trace xs left else trace xs right | ^^^^^^^^。

此外，您还应该学习如何使用控制台（F12）检查要调试的元素。

height

* {
  box-sizing: border-box;
}

.row {
  display: flex;
  border: 1px solid grey;
  align-items: center;
}

.column {
  text-align: center;
}

.left {
	height: 380px;
	background-size: cover;
  width: 50%;
  background-image: url("https://cdn.shopify.com/s/files/1/0196/2898/2334/files/MU6.jpg?2930");
}

.right {
  width: 50%;
  padding: 10px;
}

@media screen and (max-width: 600px) {
  .left {
    display: none;
  }
  .right {
    width: 100%;
  }
}

Answer 2

您将不得不给左div一定的高度，因为它内部没有任何元素或内容来赋予它一定的高度。

您还可以设置背景大小以覆盖或包含。

尝试以下代码。

 <html>
 <head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

 <style>
 * {
  box-sizing: border-box;
}

.row {
  display: flex;
  border: 1px solid grey;
  align-items: center;
  }

.column {
  text-align: center;

}

 .left {
    width: 50%;
    background-image: url(https://cdn.shopify.com/s/files/1/0196/2898/2334/files/MU6.jpg?2930);
    height: 400px;
    background-size: cover;
    background-repeat: no-repeat;
}

.right {
  width: 50%;
  padding: 10px;
}
  @media screen and (max-width: 600px) {
  .left {
    display: none;
  }
    .right {
      width: 100%;
    }
}
 </style>
 </head>
 <body>
 
<div class="row">
  <div class="column left">
  </div>
  <div class="column right">
    <i class="fa fa-unlock fa-2x" aria-hidden="true"></i>
    <h2> You're In </h2>
    <p> You deserve it. Unlock your welcome discount and be the first to know about leaked artwork & exclusive offers. </p>
    <h2> GET $20 NOW </h2>
<form class="omnisend-subscribe-form"><input type="text" class="omnisend-subscribe-input-email" placeholder="Email address" style="width: 100%; height: 50px; display: block; color: #a0a0a0; font-size: 16px; padding: 6px; border: 1px solid #cfcfcf; margin-bottom: 5px; outline-width: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;" /><input type="submit" value="I want my $20 off" style="width: 100%; height: 50px; display: block; color: #ffffff; font-size: 16px; padding: 8px; margin-top: 18px; background-color: #f47268; border-width: 0px; -webkit-border-radius: 0px; -moz-border-radius: 3px; border-radius: 0px; outline-width: 0px; cursor: pointer;" /></form>
    </div>
  </div>
  
  </body>
  </html>

Answer 3

尝试以下样式：

 .left {
      width: 50%;
       height: 100vh;
       background: url("https://cdn.shopify.com/s/files/1/0196/2898/2334/files/MU6.jpg?2930") center center;
       bacground-size: cover;
    }

div中未显示背景图片

3 个答案: