html+CSS让背景图片充满整个屏幕

html+CSS让背景图片充满整个屏幕由于给网页设置背景图时,需要设置背景图不重复且充满整个浏览器屏幕。   给body标签指定背景图,这样背景图就可以填充整个浏览器viewport了。其实,该方案对所有的块级容器都可以生效。块级容器的宽高是动态的,那么背景图将自动伸缩,充满整个容器。可设置body标签的CSS样式如下:body{/*加载背景图*/backg

大家好,又见面了,我是你们的朋友全栈君。

    由于给网页设置背景图时,需要设置背景图不重复且充满整个浏览器屏幕。

    

    给body标签指定背景图,这样背景图就可以填充整个浏览器viewport了。
     其实,该方案对所有的块级容器都可以生效。块级容器的宽高是动态的,那么背景图将自动伸缩,充满整个容器。
   可设置body标签的CSS样式如下:
   body{
  
  
    /*加载背景图*/
     background-image:url(./images/background.jpg);
     /* 背景图垂直、水平均居中 */

background-position: center center;

/* 背景图不平铺 */

background-repeat: no-repeat;

/* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */
background-attachment: fixed; //此条属性必须设置否则可能无效/

/* 让背景图基于容器大小伸缩 */
background-size: cover;

/* 设置背景颜色,背景图加载过程中会显示背景色 */
background-color: #CCCCCC;
}
或简写为如下CSS样式:
  body{
  
  
   background:url(./images/background.jpg)  no-repeat center center;
   background-size:cover;
   background-attachment:fixed;
   background-color:#CCCCCC;
}
  

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/134203.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • asp.net中DropDownList控件各种属性研究汇总

    asp.net中DropDownList控件各种属性研究汇总.aspx代码如下:AutoPostBack=”True”>AutoPostBack=”true”onselectedindexchanged=”DropDownList2_SelectedIndexChanged”>

    2022年10月17日
    0
  • 群体智能优化算法之总结

    群体智能优化算法之总结获取更多资讯,赶快关注上面的公众号吧!第十六章群体智能优化算法总结总结一下最近一段时间关于群体智能优化算法的文章,这方面的文章目前一共发表了13篇,涉及粒子群(鸟)、人工蜂群、蜘蛛猴、蚁群、布谷鸟、萤火虫群、萤火虫、蝙蝠、鱼群、蟑螂、猫群、细菌觅食和烟花算法,虽然这都是些五花八门的小东西,但也不是无规律可循,这里需要注意的是,群体智能一般是指具有生命的种群(鸟、鱼等),但也有像烟花这样的无…

    2022年5月23日
    32
  • linux nslookup命令安装,在CentOS中安装nslookup命令

    linux nslookup命令安装,在CentOS中安装nslookup命令域名查询工具nslookup并不是Win系统的专利,Linux系统中也可以使用,不过要安装,默认没有。在CentOS中安装nslookup命令:$sudoyuminstallbind-utils这个bind-utils包,就包含了nslookup命令。Ubuntu系统应该也是一样的,还没有测试过。nslookup是一个能够查询互联网域名服务器信息的程序。他有两种工作模式,即“交互模式”和“…

    2022年10月19日
    0
  • 大数据处理的基本流程是什么?[通俗易懂]

    写在前面本文隶属于专栏《100个问题搞定大数据理论体系》,该专栏为笔者原创,引用请注明来源,不足和错误之处请在评论区帮忙指出,谢谢!本专栏目录结构和文献引用请见100个问题搞定大数据理论体系解答大数据处理流程主要分为3步:1.数据抽取和集成2.数据分析3.数据解释补充1.数据抽取与集成由于大数据处理的数据来源类型丰富,利用多个数据库来接收来自客户端的数据,包括企业内部数据库、互联网数据和物联网数据,所以需要从数据中提取关系和实体,经过关联和聚合等操作,按照统一定义的格式对数据

    2022年4月9日
    75
  • 视频流媒体服务器的作用是什么?流媒体服务器功能介绍[通俗易懂]

    视频流媒体服务器的作用是什么?流媒体服务器功能介绍[通俗易懂]入行这么多年,深深觉得流媒体服务器的未来也将伴随着宽带应用和网络发展的总趋势,毕竟科技改变生活,未来流媒体也将占据网络的主流,视频流媒体服务器的功能和作用也将越来越丰富。在未来,流媒体服务器将转向高

    2022年7月1日
    21
  • BigDecimal类的简单使用方法

    BigDecimal类的简单使用方法

    2021年12月14日
    47

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号