PSD切片背景与图像答案

【问题标题】：PSD slicing background with imagePSD切片背景与图像
【发布时间】：2013-05-09 16:54:09
【问题描述】：

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

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

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

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

谢谢！

【问题讨论】：

标签： html css background-image slice psd

【解决方案1】：

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

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

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

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

【讨论】：

感谢 Thilak，我将图像切片并将其添加到具有纯色背景的单独 div 中。我失去了原始设计中的一些“光芒”，但至少它现在可以工作了:)

【解决方案2】：

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

【讨论】：