我有这张红色背景图片,看起来像这样:
那些矩形看起来又脆又漂亮。但是,当我使用 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;
}
如何获得与设计文件中所示相同的结果?感谢您的帮助。
最佳答案
背景大小设置为覆盖。它会根据窗口大小将图像拉伸(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;
}
希望这对您有所帮助。
关于html - 背景图像获取 "zoomed in",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40182889/