Question

我有身体背景图片的问题我尝试了任何东西使它全屏显示图像，但我无法解决它。你能帮帮我吗？这是代码。

＆＃13;

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]);

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

Answer 1

这就是如何使背景图像覆盖整个父元素：

background-repeat:no-repeat;
background-size:cover;
background-position:center;

并删除background-size: 100%规则。

Answer 2

Demo

  $(function(){
    var body = $('body');
    var backgrounds = ['url(http://www.hdwallpapers.in/walls/2015_christmas_new_year-wide.jpg)', 'url(http://www.hdwallpapers.in/walls/happy_new_year_2015-wide.jpg)', 'url(http://www.hdwallpapers.in/walls/regina_cassandra_latest-wide.jpg)'];
    var current = 0;
    function updateBackground() {
        body.css('background-image', backgrounds[current = ++current % backgrounds.length]);
        setTimeout(function() { updateBackground() }, 5000);
    }
    updateBackground();
  });

Answer 3

在您的代码中，只需删除第二个＆＃34; 100％＆＃34;在background-size中，为单身规则添加no-repeat和!important：

....
-o-transition: background 0.8s;
background-size: 100% !important;
background-repeat: no-repeat !important;

演示here

身体背景图像无法全屏显示

3 个答案: