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;
}
  

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Python魔术方法

    Python魔术方法

  • 《JavaScript 模式》读书笔记(4)— 函数1[通俗易懂]

    从这篇开始,我们会用很长的章节来讨论函数,这个JavaScript中最重要,也是最基本的技能。本章中,我们会区分函数表达式与函数声明,并且还会学习到局部作用域和变量声明提升的工作原理。以及大量对API

  • 数据挖掘的流程[通俗易懂]

    数据挖掘的流程[通俗易懂]数据挖掘是指一个完整的过程,该过程从大型数据库中挖掘先前未知的,有效的,可实用的信息,并使用这些信息做出决策或丰富知识。数据挖掘环境示意图如图3-13所示。数据挖掘的流程大致如下:1.问题定义在开始数据挖掘之前,最先的也是最重要的要求就是熟悉背景知识,弄清用户的需求。缺少了背景知识,就不能明确定义要解决的问题,就不能为挖掘准备优质的数据,也很难正确地解释得到的结果。要想充分发挥数据挖掘的价值,必须对目标有一个清晰明确的定义,即决定到底想干什么。2.建立数据挖掘库要进行数据挖掘必须收集要挖掘的

  • 最全的ios系统导出微信聊天记录&生成词云教程

    首先放一张我的iPhone手机导出微信聊天记录生成的词云效果图(个别敏感词汇请大家自行忽略hhh):对于如何导出手机上的微信聊天记录,网上绝大部分教程提到的“楼月微信聊天记录导出恢复助手”和“手机博士微信聊天记录查看”等软件都是收费的,免费版本只能查看很少的几条聊天记录并且不能导出。在这里提供一种绝对免费的方法可以方便地导出微信聊天记录,后面附上根据聊天记录生成词云的教程。由于我个人的手机是i…

  • 算法-DFA算法-敏感词过滤算法(OC、Swift、Python)「建议收藏」

    前言前段时间,公司的IMSDK想做敏感词过滤,但是后端的小伙伴《比较忙》,在开产品需求会的时候想把敏感词过滤放到前端,让iOS、安卓自己搞,但是前端小伙伴写了一个方法来检测一段文本,耗时一两秒钟而且比较耗CPU,这样肯定不行的,最后后端小伙伴妥协了,把敏感词过滤放到后端了。一般的思路可能是遍历敏感词库,然后把一段文字的敏感词过滤掉,但是针对比较大的词库时(比如我们的敏感词库10万),这样非…

  • java date 毫秒_如何在几个数字上加上同一个单位

    java date 毫秒_如何在几个数字上加上同一个单位//时间加上秒后的时间日期publicstaticDatetimePastTenSecond(Integersecond,Stringotime){try{SimpleDateFormatsdf=newSimpleDateFormat(“yyyy-MM-ddHH:mm:ss”);Datedt=sdf.parse(otime);CalendarnewTime=Calenda.

发表回复

您的电子邮箱地址不会被公开。

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