css - CSS如何使背景图像像图像一样拉伸

Question

大家好，我在为 div 设置背景图像时遇到问题。我想为 div 设置一个完整的背景图像。快完成了，但颜色不正确。我的图片有渐变色 我的 CSS 代码

.cards-section .item-wrapper .item-inner.category_blue {
    background: url('./images/post_blue.png') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

该设计

我的礼物

颜色不一样。你知道有什么办法可以解决吗

HTML 代码

<div class="row cards-wrapper">
   <div class="card col-md-4 col-sm-12">
      <div id="post-34" class="card_wrapper post-34 post type-post status-publish format-standard hentry category-uncategorized">
         <div class="card_header card_inner fullBackgroundImage category_purple">
            <h5 class="card_header_category">Uncategorized</h5>
            <hr class="card_header_category_break">
            <h3 class="card_title">Post 1</h3>
            <p class="card_modified">Last update: November 21, 2018</p>
         </div>
         <div class="card-body  while">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing elit duis tristique sollicitudin nibh. Cras semper auctor neque vitae tempus. In cursus turpis massa tincidunt dui ut. Dui nunc mattis enim ut. Semper quis lectus nulla at volutpat diam ut venenatis tellus. Diam volutpat</p>
         </div>
      </div>
   </div>
</div>

背景图片

标签： css

Answer 1

如果您希望背景图像像图像一样拉伸，您可以使用

background-size: 100% 100%

所以无论容器的大小，图像都会拉伸以填充它。