• 技术文章 >web前端 >css教程

    如何通过css设置背景图片全屏

    coldplay.xixicoldplay.xixi2021-03-25 17:35:43原创5741

    通过css设置背景图片全屏的方法:1、通过CSS的【background-size=100%】属性设置全屏;2、通过【background-repeat】设置图片是否重复。

    本教程操作环境:windows7系统、css3版,DELL G3电脑。

    通过css设置背景图片全屏的方法:

    1、创建以下目录结构的测试页面

    BackGround

    -- BgImage.html

    -- Images

    -- bg.png

    c3012d4f7e9a723e82db965ee4d3c89.png

    2、将测试图片显示在浏览器界面上,效果如下

    d357b8b9edb847ac831ee6397b2ed53.png

    3、通过CSS设置背景图片,默认效果如下,图片被自动重复以铺满窗口

    66fa672e35eabbe1d2ecff24de29a72.png

    4、通过CSS设置背景图片不重复,此时,图片将不能铺满窗口

    6f45410f7777f207c787779b45ebf4e.png

    5、通过CSS设置图片大小100%,效果如下,图片铺满窗口

    0a440330f1bd9403a8f7767f587d5ca.png

    6、通过CSS设置图片大小cover,效果如下,图片铺满窗口

    75b23f4980db9cc37394a5a3c81e998.png

    相关教程推荐:CSS视频教程

    以上就是如何通过css设置背景图片全屏的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css 背景图片
    上一篇:css属性有哪些类型 下一篇:css文本行高怎么设置
    php培训_php实战培训【立即报名】-php中文网第20期

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• css如何设置背景图片灰度• css怎么设置背景图片自适应居中• 在CSS中如何给背景图片加上超链接• css怎么增加背景图片
    1/1

    PHP中文网