时间戳

首页 > 解决方案 > 背景图像未出现在 div 中

html - 背景图像未出现在 div 中

问题描述

背景图像未出现在 .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%;
    }
}

标签： htmlcss

解决方案

您必须为左侧 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>

推荐阅读