怎么新建MySQL数据库

发布时间:2022-02-23 作者:admin
阅读:878

    这篇文章给大家分享的是CSS实现背景图铺满屏幕的方法。背景图铺满屏幕是比较常见的需求,但是有一些新手朋友可能对于如何实现这个效果不是很清楚,因此分享给大家做个参考,文中的示例代码介绍得很详细,实现代码如下,接下来就跟随小编一起了解看看吧。

body {
     width:100%;
     height: 100%;
    /* 加载背景图 */
    background: url("../static/images/index/backImg.jpg") no-repeat;
    /* 背景图垂直、水平均居中 */
    background-position: center center;
    /* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */
    background-attachment: fixed;
    /* 让背景图基于容器大小伸缩 */
    background-size: cover;
    /* 设置背景颜色,背景图加载过程中会显示背景色 */
  background-color: rgba(41, 50, 39, 1);
}

    发现body的高度为0,所以图片不能显示;解决办法是给html设置宽高各100%,这样body就有值了,背景图片完整的充满整个屏幕。

    扩展

    url(images/beijing.png)——图片路径的位置;

    no-repeat—— 图片不重复;

    center 0px——center是距离页面左边的定位,0px是距离页面上面的定位;

    background-position: center 0——就是图片的定位,同上;

    background-size: cover;——把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中;

    min-height: 100vh;——视窗的高度,“视区”所指为浏览器内部的可视区域大小,即window.innerWidth/ window.innerHeight大小。

    总结

    关于CSS实现背景图铺满屏幕的方法就介绍到这,上述示例具有一定的借鉴价值,感兴趣的朋友可以参考,希望能对大家有帮助,想要了解更多大家可以关注群英网络的其它相关文章。

文本转载自脚本之家

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

二维码-群英

长按识别二维码并关注微信

更方便到期提醒、手机管理

7*24 全天候服务

售前 400-678-4567

售后 0668-2555666

售后 400 678 4567

信息安全 0668-2555 118

域名空间 3004329145