在 Firefox 中将背景拉伸至 100%
我目前正在使用一个 javascript 背景脚本，该脚本可以更改计时器上的背景，并且参考白天和黑夜，这效果很好，但我正在尝试使背景拉伸到浏览器宽度的 100%，我已经这样做了通过CSS。它可以在 safari 和 chrome 中工作，但不能在 firefox 中工作（也许 IE 也是如此），而是以 100% 的尺寸显示图像，有人可以帮忙吗？
我不确定是否有一个可以与 body 一起使用的 hack，或者我必须将 javascript 重写为 div 或其他内容，但不知道如何操作，因此非常感谢您的帮助！
JavaScript
<script language="JavaScript1.2">
//Specify background images to slide
var bgslides=new Array()
var currentTime = new Date().getHours();
if (9 <= currentTime && currentTime < 18) {
bgslides[0]="images/webcam1.jpg"
bgslides[1]="images/webcam2.jpg"
bgslides[2]="images/webcam3.jpg"
}
else
{
bgslides[0]="images/webcamnight.jpg"
bgslides[1]="images/webcamnight.jpg"
bgslides[2]="images/webcamnight.jpg"
}
//Specify interval between slide (in miliseconds)
var speed=5000
//preload images
var processed=new Array()
for (i=0;i<bgslides.length;i++){
processed[i]=new Image()
processed[i].src=bgslides[i]
}
var inc=-1
function slideback(){
if (inc<bgslides.length-1)
inc++
else
inc=0
document.body.background=processed[inc].src
}
if (document.all||document.getElementById)
window.onload=new Function('setInterval("slideback()",speed)')
window.onload=new Function('setInterval("slideback()",speed)')
</script>
和 CSS
body{
background-position: 0 0;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%
}
I am currently working with a javascript background script that changes the background on a timer and and in reference to day and night this works great but I'm trying to make the background stretch to 100% of the browser width, I've done this through CSS. It works in safari and chrome but not firefox (maybe IE too) instead it see's the 100% as showing the image at 100% of it's size, can anybody help?
I'm not sure if there is a hack to work with body or I'll have to rewrite the javascript to a div or something but not sure how, so any help is appreciated!
The javascript
<script language="JavaScript1.2">
//Specify background images to slide
var bgslides=new Array()
var currentTime = new Date().getHours();
if (9 <= currentTime && currentTime < 18) {
bgslides[0]="images/webcam1.jpg"
bgslides[1]="images/webcam2.jpg"
bgslides[2]="images/webcam3.jpg"
}
else
{
bgslides[0]="images/webcamnight.jpg"
bgslides[1]="images/webcamnight.jpg"
bgslides[2]="images/webcamnight.jpg"
}
//Specify interval between slide (in miliseconds)
var speed=5000
//preload images
var processed=new Array()
for (i=0;i<bgslides.length;i++){
processed[i]=new Image()
processed[i].src=bgslides[i]
}
var inc=-1
function slideback(){
if (inc<bgslides.length-1)
inc++
else
inc=0
document.body.background=processed[inc].src
}
if (document.all||document.getElementById)
window.onload=new Function('setInterval("slideback()",speed)')
window.onload=new Function('setInterval("slideback()",speed)')
</script>
and the css
body{
background-position: 0 0;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
尝试使用：
或
try using:
or
虽然此属性是 Gecko 1.9.2 (Firefox 3.6) 中的新属性，但在 Firefox 3.5 中可以使用 -moz-border-image 将图像完全拉伸到背景上。
您还可以尝试假拉伸背景：
通过 dom 您可以更改 img。
While this property is new in Gecko 1.9.2 (Firefox 3.6), it is possible to stretch a image fully over the background in Firefox 3.5 by using -moz-border-image .
You can also try to fake stretching a background:
By way of dom you can change the img.