如何修复背景位置的错误？

Question

边框的一部分是隐藏的。我试图使用* { margin: 0; padding: 0; } .container { max-width: 1170px; width: 100%; margin: 0 auto; padding: 0 15px; } .item_wrapper { display: flex; justify-content: space-between; } .items { display: flex; flex-direction: column; justify-content: center; max-width: 270px; background-image: url(https://svgshare.com/i/6MZ.svg); min-height: 270px; background-size: cover; background-repeat: no-repeat; padding: 0 20px; }的不同变量。但它没有帮助我。

代码示例：

<div class="container">
  <div class="item_wrapper">
    <div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, voluptas dicta aut hic dolorum quam ex consequuntur esse vel cum voluptatem tempora expedita molestias optio necessitatibus reiciendis asperiores odio blanditiis!</div>
  <div class="items">Tenetur minus cumque enim est in aliquam quam blanditiis obcaecati quae aut quis, ratione rerum facere accusantium? Quos eum, sequi odit exercitationem beatae iusto fugiat maxime nulla a laboriosam rem!</div>
  <div class="items">Necessitatibus voluptatum quisquam placeat. Provident quo ut autem voluptatibus assumenda odit maxime rerum! Porro vitae omnis nemo eveniet aspernatur, iste veniam placeat repudiandae. Ab exercitationem non eligendi hic doloremque accusantium?</div>
  <div class="items">Id voluptas architecto quisquam nobis. Nisi, dicta, deleniti maxime atque aperiam, fuga reprehenderit cum ex numquam voluptatum totam? Quisquam fugit numquam accusantium temporibus iusto. Vel quasi cupiditate magni excepturi recusandae!</div>
  </div>
</div>

Public List<Items> Get(string sql)
{

 using (SqlConnection connection = new SqlConnection(
               connectionString))
    {
        var  ItemsList = new List<Items>();
        var Items = new Items()
        SqlCommand command = new SqlCommand(sql, connection);       
        SqlDataReader dr = command.ExecuteReader();
        dr = cmd.ExecuteReader();

        while (dr.Read())
        {
               Items.ItemID  = dr["ItemID"].ToString();
               Items.ItemName = dr["ItemName"].ToString();                        
               Items.ItemPlace = dr["ItemPlace"].ToString();
               ItemsList.Add(Items);
        }

        if(ItemsList.Count == 0)
          {
             Items.ItemID = null;
             Items.ItemName = null;
             Items.ItemPlace = null;
             ItemsList.Add(Items);
          }

        return ItemsList;
    } 
}

P.S。在示例中，底部边框是隐藏的。

Answer 1

您需要强制背景大小以覆盖可用的宽度和高度。为了实现这一目标，您必须指定背景大小：background-size: 100% 100%;，以便填充其容器。

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1170px;
	width: 100%;
	margin: 0 auto;
	padding: 0 15px;
}

.item_wrapper {
  display: flex;
  justify-content: space-between;
  
}

.items {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 270px;
  background-image: url(https://svgshare.com/i/6MZ.svg);
  min-height: 270px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 0 20px;
  
}

＆＃13;

<div class="container">
  <div class="item_wrapper">
    <div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, voluptas dicta aut hic dolorum quam ex consequuntur esse vel cum voluptatem tempora expedita molestias optio necessitatibus reiciendis asperiores odio blanditiis!</div>
  <div class="items">Tenetur minus cumque enim est in aliquam quam blanditiis obcaecati quae aut quis, ratione rerum facere accusantium? Quos eum, sequi odit exercitationem beatae iusto fugiat maxime nulla a laboriosam rem!</div>
  <div class="items">Necessitatibus voluptatum quisquam placeat. Provident quo ut autem voluptatibus assumenda odit maxime rerum! Porro vitae omnis nemo eveniet aspernatur, iste veniam placeat repudiandae. Ab exercitationem non eligendi hic doloremque accusantium?</div>
  <div class="items">Id voluptas architecto quisquam nobis. Nisi, dicta, deleniti maxime atque aperiam, fuga reprehenderit cum ex numquam voluptatum totam? Quisquam fugit numquam accusantium temporibus iusto. Vel quasi cupiditate magni excepturi recusandae!</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需制作背景尺寸：包含，它将解决您的问题。