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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 代码农民提高生产力

    代码农民提高生产力

    2022年1月4日
  • Tfs权限设置_设置朋友圈权限对方知道吗

    Tfs权限设置_设置朋友圈权限对方知道吗tfs账号分两种情况,一种是基于AD域的 一种是基于Windows账号要使用基于AD域的,tfs必须基于域用户安装。一般会单独建一个tfs的域帐号用来管理tfs用。基于windows的多数都是直接用administrator账号了。tfs增加用户的时候,基于域的直接选择域用户,基于windows账号的直接选择本机的windows账号即可添加用户到tfs后,可

    2022年10月25日
  • 同济大学计算机夏令营2021,同济大学2021年接收推荐免试研究生(含直接攻博)名单公示…「建议收藏」

    同济大学计算机夏令营2021,同济大学2021年接收推荐免试研究生(含直接攻博)名单公示…「建议收藏」报名参选了同济大学推荐免试的考生们请注意!同济大学2021年接收推荐免试研究生拟录取名单,学校已经发布了!为帮助各位参加了推免的考生及时了解录取结果,医学教育网小编从同济大学研究生院的官网上查找到了“同济大学2021年接收推荐免试研究生(含直接攻博)名单公示”通知内容如下,请同学仔细查看!有问题请及时联系学校!为切实做好推免招生信息公开工作,保证推免工作各个环节公开、透明。按照教育部有关要求,现将…

    2022年7月25日
  • Java 之 集合中的 modCount的作用「建议收藏」

    Java 之 集合中的 modCount的作用「建议收藏」modCount:记录当前集合被修改的次数在所有的集合实现类中(Collection与Map中),都会有一个 modCount 的变量出现,它的作用就是记录当前集合被修改的次数。下面以ArrayList 类进行说明:添加方法:删除方法:可以看出,两个操作都会影响元素的个数。 当我们使用迭代器或 foreach 遍历时,如果你在 foreach 遍历时,自动调用迭代器的迭代方法,此时在遍历过程中调用了集合的add,remove方法时,modCount就会改变,而迭代器记录的modCount

    2022年8月9日
  • 详解SpringMVC执行流程[通俗易懂]

    详解SpringMVC执行流程[通俗易懂]SpringMVC执行流程SpringMVC执行流程整体如下:执行流程分析(1)浏览器提交请求到中央调度器。(2)中央调度器直接将请求转给处理器映射器。(3)处理器映射器会根据请求,找到处理该请求的处理器,并将其封装为处理器执行链后返回给中央调度器。(4)中央调度器根据处理器执行链中的处理器,找到能够执行该处理器的处理器适配器。(5)处理器适配器调用执行处理器。(6)处理器将处理结果及要跳转的视图封装到一个对象ModelAndView中,并将其返回给处理器适配器。(7)处理器适配

    2022年6月28日
  • 常用的测试用例设计方法有那些类型_测试用例设计

    常用的测试用例设计方法有那些类型_测试用例设计扎实的基础是成功的一半,学号好基础,才能更好的进步!常见的测试用例设计方法主要会涉及以下几种:1、等价类2、边界值3、场景法4、判定表5、因果图6、错误推断法7、正交测试法(正交表)(今天主要解释前三种最为常用)选择合适的测试用例方法,有助于你去更好的梳理出逻辑关联关系,让你的测试覆盖率更高,更高效率的覆盖到所有测试点。一、等价类划分法1)定义依据需求输入划分为若干等价类,从等价类中选定一个测试…

    2022年10月11日

发表回复

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

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