Question

我有这个红色背景图像，如下所示：

这些矩形看起来清脆而美观。但是当我用CSS添加它作为背景图像时，我得到了放大效果，它看起来并不好看：

图像尺寸为1800 * 344px。这里有人建议使用background-size：contains;但最终却没有显示背景。

这是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

将背景大小设置为覆盖。它会根据窗口大小的大小来将图像拉伸或倾斜到屏幕大小。最好使用包含在这种情况下，因为图像的外观我相信它可以重复而不显示可见的连接，所以尝试下面的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;
                }

希望这有帮助。

背景图片被“放大”

1 个答案: