大佬教程收集整理的这篇文章主要介绍了CSS3 background-size：封面不会使图像垂直覆盖，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
当浏览器窗口短而宽时,我希望图像扩展,以便它的顶部填充整个屏幕的长度,其余部分不可见.
当浏览器窗口又高又薄时,我希望图像能够展开,这样它的左侧部分就会在高度上填满整个屏幕,而其余部分则不可见.
使用CSS3 BACkground-size：cover属性使前者像魅力一样,后者则不然.相反,背景图像缩小,以便在可用的窄区域内完全可见并缩放到宽度,然后在其下面的页面的其余部分只是背景颜色.
body { BACkground-color: #BF6F30; color: black; font-family: Georgia,"Times New Roman",sans-serif; BACkground: url(' ... '); -webkit-BACkground-size: cover; -moz-BACkground-size: cover; -o-BACkground-size: cover; BACkground-size: cover; }
我该如何解决这个问题？
这两个例子都有用吗？
HTML
<body id="page-body"> <img class="bg" src="images/bodyBACkground1.jpg"> <div class="wrapper"> </div> </body>
CSS
html { BACkground: url(images/bodyBACkground1.jpg) no-repeat center center fixed; -webkit-BACkground-size: cover; -moz-BACkground-size: cover; -o-BACkground-size: cover; BACkground-size: cover; } body { BACkground:#fff; margin: 0; padding: 0; overflow:hidden; } html,body { height: 100%; } img.bg { /* Set rules to fill BACkground */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024pX) { /* Specific to this particular image */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } }
还是这一个？这个将数据库中的图像加载到数组中并随机加载它们,但您可以从中收集一些信息：
php加载功能
<?php $bg_images = array( 0 => 'comp1.png',1 => 'comp2.png',2 => 'comp3.png',.... ); $image = $bg_images[ rand(0,(count($bg_images)-1)) ]; $showBG = "<img class=\"source-image\" src=\"images/bg/" . $image . "\"/>"; ?>
HTML
... <body> <?php echo $showBG; ?> <div id="wrapper"> ...
CSS
html,body { margin:0; height:100%; } img.source-image { width:100%; position:absolute; top:0; left:0; z-index:0; min-width:1024px; }
这些选项应根据高度和宽度填充浏览器窗口.
以上是大佬教程为你收集整理的CSS3 background-size：封面不会使图像垂直覆盖全部内容，希望文章能够帮你解决CSS3 background-size：封面不会使图像垂直覆盖所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。