正文背景图像无法全屏显示

Body Background image cannot full screen

本文关键字：显示 背景 图像 正文      更新时间：2023-09-26

我对身体背景图像有问题，我尝试了一切方法使其全屏显示图像，但我无法修复它。你能帮帮我吗？这是代码。

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%规则。

演示 

  $(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();
  });

在您的代码中，只需删除 background-size 中的第二个"100%"，为单体规则添加一个no-repeat和一个!important：

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

在这里演示

相关文章：