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年6月7日 上午9:46
下一篇 2022年6月7日 上午9:46


相关推荐

  • JAVA XML转对象 对象转XML

    JAVA XML转对象 对象转XML在网上看了许多XML跟Obj互相转换的Demo,但是都很复杂,现在推荐一个极度简单好理解的XML和Obj互转的例子:JacksonXML,只需要简单的几个注解就能完成XML和Obj的相互转换假设有如下xml报文:<?xmlversion=”1.0″encoding=”utf-8″?><msgbody><StringList>&…

    2022年7月21日
    17
  • jdbc元数据DataBaseMetaData查询数据库表信息详解

    jdbc元数据DataBaseMetaData查询数据库表信息详解java-jdbc获取表信息,表字段信息,并且匹配实体对象类型

    2022年6月19日
    40
  • Dreamweaver8 网站制作软件使用教程

    Dreamweaver8 网站制作软件使用教程Dreamweaver是我喜欢做网站的软件。之所以喜欢Dreamweaver8是因为这个版本有折叠功能。下面说说它的使用方法。1、创建站点文件。注意看截图的顺序,如下图2、选择你喜欢的编辑模

    2022年7月4日
    24
  • 你一定要知道的分布式架构演化史|干货满满

    你一定要知道的分布式架构演化史|干货满满分布式架构的发展壮大正是一批批程序员前赴后继 遇到问题并解决问题 不断迭代得到的技术成果 为所有程序员点赞

    2025年9月22日
    6
  • git上项目代码拉到本地方法

    git上项目代码拉到本地方法1、先在本地打开workspace文件夹,或者自定义的文件夹,用来保存项目代码的地方。2、然后登陆GitHub账号,点击复制项目路径3、在刚才文件夹下空白处点击鼠标右键,打开Git窗口4、在以下页面中输入命令gitclone加刚才复制的路径,如下图(可能Ctrl+V用不了,可以用右键选择Paste完成复制)5、输入完命令行之后回车就行,等待下载完毕,然后是切换…

    2022年5月29日
    115
  • jiaowubuaa_acm题

    jiaowubuaa_acm题每一头牛的愿望就是变成一头最受欢迎的牛。现在有 N 头牛,编号从 1 到 N,给你 M 对整数 (A,B),表示牛 A 认为牛 B 受欢迎。这种关系是具有传递性的,如果 A 认为 B 受欢迎,B 认为 C 受欢迎,那么牛 A 也认为牛 C 受欢迎。你的任务是求出有多少头牛被除自己之外的所有牛认为是受欢迎的。输入格式第一行两个数 N,M;接下来 M 行,每行两个数 A,B,意思是 A 认为 B 是受欢迎的(给出的信息有可能重复,即有可能出现多个 A,B)。输出格式输出被除自己之外的所有牛认为是

    2022年8月9日
    7

发表回复

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

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