Html 基于图像的PSD背景切片

我为我的网站设计了一个PSD，我在主标题的编码上遇到了麻烦。 这是

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

我应该如何编写代码？我曾想过分割图像并将其作为常规图像元素添加，但这很困难，因为图像周围有一个辉光，它与背景融合在一起

有没有更简单的方法

谢谢

您应该在背景样式中添加“中心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;
}

---

它在特定屏幕分辨率下正确显示的原因是，您的图像尺寸为1550x417，并且您使用CSS背景位置属性将其设置为1300px 400px。这对设置背景位置来说不是一种非常灵敏的方式，而且它必然会随着屏幕的不同而变化

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

切片：

例如：

---

背景：url（'../images/banner2.jpg'）中心不重复#ECE8DF

感谢Thilak，我将图像切片，并将其添加到一个单独的div中，具有坚实的背景。我在最初的设计中失去了一些“光彩”，但至少现在它还在工作：）