0
早上好，所以我會馬上下到肉和土豆。我一直在抓我的大腦，所以有一些其他人如何使這個Splash頁面背景圖像滑塊有圖像不溢出。一切都設置爲100％，所以理論上它應該填滿屏幕，就是這樣。或者我想。這裏是目前正在使用的代碼。背景圖片滑塊延伸至屏幕
#icontent .background-slideshow-main{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#icontent #maximage img {width: 100%;min-height: 100%;display: none; }
#icontent #maximage img:first-child {display: block;}
#icontent #cycle-loader{display: none;}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Fonts -->
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,600,200italic,400italic" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lora:400italic,700italic' rel='stylesheet' type='text/css'>
<!-- Carousel CSS -->
<link href="/files/theme/owl.carousel.css" rel="stylesheet">
<!-- SPLASH PAGE LOAD CSS -->
<link href="/files/theme/icon-bounce.css" type="text/css" rel="stylesheet">
<link href="/files/theme/jquery.gala-maxi.min.css" type="text/css" rel="stylesheet">
<!-- LOAD SCRIPT -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Responsive -->
<meta name="viewport" content="initial-scale=1">
<link rel="stylesheet" media="all and (max-width: 1024px)" href="/files/theme/responsive.css">
<script src="/files/theme/mobilenav.js"></script>
</head>
<body class='splash-page gala-maxi wsite-theme-light'>
<div id="main-content-page">
<div class="container">
<button id="close-button" class="content-change"> </button>
<div id="search-bar"><div class="content-wrapper">{search}</div></div>
<nav id="site-navigation" role="navigation">
<div class="nav clearfix table">
<div id="logo" class="table-content">{logo}</div>
<div id="navigation" class="clearfix table-content">{menu}</div>
<div class="social-frame table-content">{social}</div>
<div id="search-button" class="table-content"><i class="af-search"></i></div>
</div>
</nav>
<div class="content-wrapper">
<div class="content large-padding">{content}</div>
</div>
<footer id="footer" class="clearfix">
<div class="content-wrapper">
<div id="footer-content" class="med-padding">{bottom:content}</div>
<div id="footer-content" class="med-padding" style="display:none;">{footer}</div>
<a href="#site-navigation" class="btt">BACK TO TOP</a>
<div class="aligncenter xsmall-padding">
<div class="copyright">{copyright:text}</div>
</div>
</div>
</footer>
</div>
</div>
<div id="home-page">
<div class="background-slideshow-main" >
<img id="cycle-loader" src="/files/theme/maxi-loader.gif" />
<div id="maximage">
<img src="http://www.weebly.com/editor/uploads/4/3/9/2/43921627/custom_themes/935851054638803653/files/Innovative.jpg" alt="" />
<img src="http://www.weebly.com/editor/uploads/4/3/9/2/43921627/custom_themes/935851054638803653/files/Quality.jpg" alt="" />
<img src="http://www.weebly.com/editor/uploads/4/3/9/2/43921627/custom_themes/935851054638803653/files/Dedication.jpg" alt="" />
</div>
</div>
<div class="home-page-content">
<!-- Change Logo Position Here -->
<header id="home-header" class=" onload">
<div class="content-wrapper">
<div id="home-logo" class="small-padding">{home:logo}</div>
<nav id="home-navigation" role="navigation" class="small-padding">{menu}</nav>
<div class="note"><p>The home top navigation bar ONLY display MAIN tabs. The navigation bar of the page will display submenus</p></div>
</div>
</header>
<div id="height-adjust" class="content-wrapper center-content table onload">
<div class="med-padding table-content">
<div class="note"><p>Content will be centered vertically and horizontally when site is published</p></div>
<!-- Insert TEXTBOX for Content Area -->
<div class="content">{feature:content global="false"}</div>
</div>
</div>
<button id="open-button" class="content-change bounce"> </button>
</div>
</div>
<!-- Background Slider -->
<script src="/files/theme/jquery.cycle.all.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/files/theme/jquery.maximage.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function($) {
$('#maximage').maximage({
cycleOptions: {
},
onFirstImageLoaded: function(){
$('#cycle-loader').hide();
$('#maximage').fadeIn('fast');
}
});
});
</script>
<!-- Script Files -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<!-- Carousel -->
<script src="/files/theme/owl.carousel.min.js"></script>
<!-- Video Lightbox -->
<script src="/files/theme/jquery.colorbox-min.js"></script>
<!-- Splash Page js -->
<script src="/files/theme/basic-splashpage.js"></script>
<script>
jQuery(document).ready(function($) {
// Video Lightbox Widget - **EDIT VIDEO POPUP SIZE HERE**
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
$(".vimeo").colorbox({iframe:true, innerWidth:640, innerHeight:390});
// Initiate Carousel
$(".5item-carousel").owlCarousel({
// autoPlay: 3000, //Set AutoPlay transition speed by changing "3000" to different time interval
pagination : false, //Turn on Page tabs by changing "false" to "true"
navigation : true, //Turn off previous & next arrow by chaning "ture" to "false"
itemsDesktop : [1024,4],
itemsDesktopSmall : [786,3],
itemsTablet: [600,2],
itemsMobile : [384,1],
lazyLoad : true
});
$(".4item-carousel").owlCarousel({
// autoPlay: 3000, //Set AutoPlay transition speed by changing "3000" to different time interval
pagination : false, //Turn on Page tabs by changing "false" to "true"
navigation : true, //Turn off previous & next arrow by chaning "ture" to "false"
items : 4,
itemsDesktop : [1024,4],
itemsDesktopSmall : [786,3],
itemsTablet: [600,2],
itemsMobile : [384,1],
lazyLoad : true
});
$(".3item-carousel").owlCarousel({
// autoPlay: 3000, //Set AutoPlay transition speed by changing "3000" to different time interval
pagination : false, //Turn on Page tabs by changing "false" to "true"
navigation : true, //Turn off previous & next arrow by chaning "ture" to "false"
items : 3,
itemsDesktopSmall : [1024,3],
itemsTablet: [786,2],
itemsMobile : [384,1],
lazyLoad : true
});
$(".2item-carousel").owlCarousel({
// autoPlay: 3000, //Set AutoPlay transition speed by changing "3000" to different time interval
pagination : false, //Turn on Page tabs by changing "false" to "true"
navigation : true, //Turn off previous & next arrow by chaning "ture" to "false"
items : 2,
itemsTablet: [1024,2],
itemsMobile : [384,1],
lazyLoad : true
});
$(".1item-carousel").owlCarousel({
// autoPlay: 3000, //Set AutoPlay transition speed by changing "3000" to different time interval
pagination : false, //Turn on Page tabs by changing "false" to "true"
navigation : true, //Turn off previous & next arrow by chaning "ture" to "false"
singleItem : true,
lazyLoad : true
});
});
</script>
</body>
</html>
然後最後一個問題，爲什麼圖像只是從一個到另一個，沒有淡入淡出？
這裏是一個實際發生的事情的圖像。 Screenshot of preview
請給你的HTML代碼，以及可能 –
是關係到絕對位置的問題。確保offsetParent被設置爲所需的位置和尺寸。你可以嘗試使用'height：100vh;寬度：100vw'，但很難說明沒有你的html – user3154108
我爲頁面上面添加了所有的HTML .. –