html - PSD 切片背景与图像

Question

我的网站有一个 PSD 设计，但我在编写主横幅代码时遇到了问题。这是 page

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

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

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

谢谢!

Answer 1

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

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

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

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