html - 背景图像获取 "zoomed in"

Question

我有这张红色背景图片，看起来像这样:

那些矩形看起来又脆又漂亮。但是，当我使用 CSS 将其添加为背景图片时，我得到了放大效果，而且看起来一点也不好:

图片大小为1800*344px。这里有人建议使用 background-size: contain;但这以完全不显示背景而告终。

这是 HTML:

<section id="aboutprocess">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <p class="text-center">Our agile team continuously delivers working software and empowers your organization to embrace changing requirements.</p>
                <button type="button" class="btn btn-default center-block blue">more</button>
            </div>
        </div>

    </section>

还有 CSS:

                #aboutprocess {
                        margin-top: 64px;
                        padding: 64px 0;
                        background: url(../img/tech_bg.jpg) no-repeat center center fixed;
                        width: 100%;
                        height: 344px;
                        background-size: cover;
                    }

如何获得与设计文件中所示相同的结果？感谢您的帮助。

Answer 1

背景大小设置为覆盖。它会根据窗口大小将图像拉伸(stretch)或倾斜到屏幕大小。最好在这种情况下使用包含，因为从图像的外观来看，我相信它可以在不显示可见连接的情况下重复，因此请尝试以下 css。

#aboutprocess {
                    margin-top: 64px;
                    padding: 64px 0;
                    background: url(../img/tech_bg.jpg) repeat center center fixed;
                    width: 100%;
                    height: 344px;
                    background-size: contain;
                }

希望这对您有所帮助。