在靜態網站上使用CSS的全屏背景滑塊

Question

我有一個靜態網站，我需要創建一個固定高度為587px的背景滑塊。 每張圖片的寬度為2000像素，但用戶只需要在屏幕寬度超過網站的1000像素的范圍內查看圖片即可。 圖像無需以任何方式移動，拉伸或響應。

它的外觀和功能必須類似於www.adsphoenix.com/2013design/index5.php，但必須是背景滑塊。 如果選擇“查看背景圖像”（Firefox），則會看到該圖像比大多數屏幕都要寬。 它與中心和頂部對齊。

我遇到的問題是找到一個滑塊以使圖像移出1000px網站。 例如，www.adsphoenix.com / 2013design /。 所有這些圖像均為587 x 2000px。

與此類似的將是www.chattanoogafun.com。 但是，此滑塊會拉伸。

您是否知道可以使用的預制滑塊？ 還是可以更改滑塊的對齊方式？ 或者我可以對我的代碼做些什么以使其正常工作？ 我有Blue Host托管。

Answer 1

您可以使用CSS將圖像添加為滑塊div的背景圖像，並使用以下代碼：

.slider_div { //or another selector

    background: url(../path/to/image) center center no-repeat;

}

如果要滑動背景，則需要使用內聯CSS來設置滑塊div的背景（或使用jQuery）。