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>

背景图片

Answer 1

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

{{1}}

因此，无论容器的大小如何，图像都会拉伸以填充它。

Answer 2

这仅仅是因为背景附件的固定属性。当用户滚动该元素时，将调整图像的大小以填充整个空间。因此，图像更大了，您看不到整个图像。

如果您真的不需要，请尝试删除该固定属性。