html - PSD切片背景与图像

Question

我为我的网站设计了一个 PSD 设计，但我在编写主横幅时遇到了问题。这是页面

顶部横幅（带有小人物的图像）在某些屏幕分辨率下无法正确显示。我将整个横幅与图像一起切片并将其设置为背景图像，并且文本是实时的。问题是，在某些屏幕上，图像出现在文本之上。

我应该如何编码？我想过将图像切片并将其添加为常规图像元素，但这很困难，因为图像周围有一个融入背景的光晕。

有没有更简单的方法来做到这一点？

谢谢！

Answer 1

您应该将“center 0”添加到背景样式中。

#banner {
background: url("../images/banner2.jpg") no-repeat center 0;
background-color: #e8e4da;
height: 400px;
padding: 0;
background-size: 1300px 400px;
border-bottom: 2px solid #fff;
}

Answer 2

它在某些屏幕分辨率下正确显示的原因是因为您的图像尺寸为 1550x417，并且您使用 CSS 背景位置属性将其设置为 1300px 400px。这不是设置背景位置的一种非常敏感的方式，并且它必然会因屏幕而异。

有一种更简单的方法可以做到这一点。既然横幅大多是纯色的，为什么不只切片图像的图形部分，并使用背景颜色呢？然后，您可以将图像定位到元素的中心。

切片：http: //i.imgur.com/2s35JYs.png

示例：背景：url('../images/banner2.jpg') center center no-repeat #ECE8DF;