我的 body 背景图像有问题,我尝试了任何方法让它全屏显示图像,但我无法修复它。你能帮帮我吗?这是代码。
var body = $('body');
var backgrounds = ['url(images/3.jpg)', 'url(images/4.jpg)', 'url(images/5.jpg)'];
var current = 0;
function nextBackground() {
body.css('background', backgrounds[current = ++current % backgrounds.length]);
setTimeout(nextBackground, 5000);
}
setTimeout(nextBackground, 5000);
body.css('background', backgrounds[0]);
@charset "utf-8";
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, em, img, strong, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
ol, ul html, body {
height: 100%;
width: 100%;
font: normal 12px/1.3 "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
color: #DDDDDD;
background-size: 100% 100%;
}
body {
height: 100%;
width: 100%;
-webkit-transition: background 0.8s;
-moz-transition: background 0.8s;
-o-transition: background 0.8s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
最佳答案
这是让背景图片覆盖整个父元素的方法:
background-repeat:no-repeat;
background-size:cover;
background-position:center;
并删除 background-size: 100%
规则。
关于javascript - 正文背景图片不能全屏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27648707/