PSD與圖片切片背景

Question

我得到了我的網站的PSD設計，我無法編碼主要的橫幅。 這是page

在某些屏幕分辨率上，頂部橫幅（與小人物的圖像）無法正確顯示。我將整個橫幅與圖像一起切分，並將其設置爲背景圖像，並且文本是實時的。問題是，在某些屏幕上，圖像出現在文本的頂部。

我該如何編碼？我想過切分圖像並將其添加爲常規圖像元素，但這很困難，因爲圖像周圍有輝光，並融入背景。

有沒有更簡單的方法來做到這一點？

謝謝！

Answer 1

之所以它正確地顯示在特定的屏幕分辨率是因爲你的圖像尺寸爲1550x417，並且你使用CSS背景位置屬性將其設置爲1300px 400像素。這不是一個設置背景位置的非常快速的方式，它在每​​個屏幕上都會有所不同。

有一個更簡單的方法來做到這一點。由於橫幅大多是純色，爲什麼不切片圖像的圖形部分，並使用背景顏色？然後您可以將圖像定位到元素的中心。

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

實施例： 背景：網址（ '../圖像/ banner2.jpg'）中心中心不重複＃ECE8DF;

Answer 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; 
}