我刚刚建立了一个WordPress网站,并希望将滑块图像设置为全屏。我目前设置了滑块革命和WPBakery页面生成器插件。
一切都设置好了,只是图像不与顶部的菜单重叠。
我希望图像在此网站上全屏显示,https://www.rentmycaravan.com/
我的网站 www.hiremytent.com。
谢谢。
你可以
用css做到这一点,如下所示。只需确保将"图像.jpg"替换为背景图像即可。
body{height:100%;
width:100%;
background-image:url(image.jpg);/*your background image*/
background-repeat:no-repeat;/*we want to have one single image not a repeated one*/
background-size:cover;/*this sets the image to fullscreen covering the whole screen*/
/*css hack for ie*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.image.jpg',sizingMethod='scale');
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg',sizingMethod='scale')";
}
你也可以通过使用一些jQuery插件来做到这一点:
- http://srobbin.com/jquery-plugins/backstretch/
- http://buildinternet.com/project/supersized/
试一试:
body{height:100%;
width:100%;
background-image:url(test-image-camping.jpg);/*your background image*/
background-repeat:no-repeat;/*we want to have one single image not a repeated one*/
background-size:cover;/*this sets the image to fullscreen covering the whole screen*/
/*css hack for ie*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.test-image-camping.jpg',sizingMethod='scale');
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test-image-camping.jpg',sizingMethod='scale')";
}
或者,您也可以将图像设置为底层:
<img src='test-image-camping.jpg' style='position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:-1;'>