[英]Body Background image cannot full screen
我的身體背景圖片有問題,我嘗試了使其全屏顯示的圖像,但無法修復。 你能幫我嗎? 這是代碼。
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;
在這里演示
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.