在静态网站上使用CSS的屏幕背景滑块的全宽

Full width-of-screen background slider using CSS on a static website

本文关键字：背景 屏幕 CSS 网站 静态      更新时间：2023-09-26

我有一个静态网站，我需要创建一个固定高度为587px的背景滑块。每个图像的宽度是2000px，但用户只需要看到他或她的屏幕宽度超过1000px的图像，即网站的宽度。图像不需要以任何方式移动、拉伸或响应。

它的外观和功能需要类似于www.adsphoenix.com/2013design/index5.php，但它是一个背景滑块。如果你选择"查看背景图像"（Firefox），你会看到图像比大多数屏幕都宽。它与中心和顶部对齐。

我遇到的问题是找到一个滑块，允许图像超出1000px的网站。例如，www.adsphoenix.com/2013design/。所有这些图像都是587 x 2000px。

类似的东西是www.chattanoogafun.com。然而，这个滑块是拉伸的。

你知道一个预构建的滑块可以工作吗？或者我可以更改对齐方式的滑块？或者我可以对我的代码做些什么来让它工作？我和Blue Host一起主持。

您可以使用CSS将图像添加为滑块div的背景图像，并使用以下代码：

.slider_div { //or another selector
    background: url(../path/to/image) center center no-repeat;
}

如果你想滑动你的背景，你需要内联CSS来设置滑块div的背景（或者使用jQuery）。

相关文章：