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


相关推荐

  • 数据分析的具体案例(通过数据分析得到什么)

    今天给大家分享一个数据分析案例:线下连锁水果店销售数据分析案例,分析过程我也会以类动图的方式呈现给大家,真正意义上做到收藏即学会。目录1案例背景2问题确认与指标拆解题3问题解决思路4案例实操4.1利用分组分析找到亏损店铺做营销优化,实验验证结论4.2运用对比分析法解决哪类产品销售好的问题?4.3利用矩阵关联法找到销量好和利润高的品类4.4运用趋势分析法分析水果总需求如何?5结论分析报告1案例背景果多吃水果连锁超市是华北地区的热门线下水果超市。该超市覆盖华北5个省份,且在京津冀地区门

    2022年4月11日
    113
  • 【Mybatis框架】输出映射resultType与resultMap

    【Mybatis框架】输出映射resultType与resultMap如果你搜索只是返回一个值,比如说String ,或者是int,那你直接用resultType就行了。但是你如果是返回一个复杂的对象,就必须定义好这个对象的resultMap的result map。如果你搜索只是返回一个值,比如说String ,或者是int,那你直接用resultType就行了。但是你如果是返回一个复杂的对象,就必须定义好这个对象的resultMap的result …

    2022年6月13日
    30
  • 数据分析师面试准备

    数据分析师面试准备数据分析师面试准备惊醒。突然发现再要一个月就要过年了,过了年再过个两周就三月了。三月……又到了招聘季。

    2022年6月3日
    33
  • JMeter之事务控制器

    JMeter之事务控制器

    2021年7月13日
    123
  • Wifi开坑

    Wifi开坑缘起:读书期间,大量接触通信基础,无线快速发展,目光关注点自然是高高的基站塔,以及小小的手机(这个信息社会浓缩操作系统、通信、开源和智能化(智能掌机)的结晶当然也不简单)。至于短距离通信里面的形形色色,眼花缭乱的Wifi、BLE(蓝牙)、Zigbee、体域网则是感知中盲区,异类。一直到博士后期到职业才隐隐感知到,天下大事必出于细的道理。云动:就如“小小”体域网(Bodyareanetwork)中除了通用的天线设计、收发、同步、多通道处理外还有特别关注的鲁棒性设计,如何高可靠无中断地始终获取无线信

    2022年7月21日
    14
  • batchnorm原理及代码详解(笔记2)

    batchnorm原理及代码详解(笔记2)Batchnorm原理详解前言:Batchnorm是深度网络中经常用到的加速神经网络训练,加速收敛速度及稳定性的算法,可以说是目前深度网络必不可少的一部分。本文旨在用通俗易懂的语言,对深度学习的常用算法–batchnorm的原理及其代码实现做一个详细的解读。本文主要包括以下几个部分。Batchnorm主要解决的问题 Batchnorm原理解读 Batchnorm的优点 Batc…

    2022年5月28日
    36

发表回复

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

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