Question

我为我的网站设计了一个PSD设计，而且我在编写主横幅时遇到了麻烦。这是page

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

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

有没有更简单的方法呢？

谢谢！

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

实施例： background：url（'../ images / banner2.jpg'）center center no-repeat＃ECE8DF;

PSD切片与图象的背景

2 个答案: