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


相关推荐

  • html5添加网页背景音乐完整代码_网页添加音乐播放

    html5添加网页背景音乐完整代码_网页添加音乐播放方式一:<audiosrc=”static/sound/happyBirthday.mp3″autoplay=”autoplay”preload=”auto”controls=”controls”></audio>或<audioautoplay=……><sourcesrc=”static/sound/happyBirthda…

    2022年9月25日
    3
  • spark面试题目_面试提问的问题及答案

    spark面试题目_面试提问的问题及答案一、简答题1.Sparkmaster使用zookeeper进行HA的,有哪些元数据保存在Zookeeper?答:spark通过这个参数spark.deploy.zookeeper.dir指定master元数据在zookeeper中保存的位置,包括Worker,Driver和Application以及Executors。standby节点要从zk中,获得元数据信息,恢复集群运行状态,才能对外…

    2025年6月24日
    2
  • java的学生信息管理系统_学生管理系统java

    java的学生信息管理系统_学生管理系统java导读正文本文实例为大家分享了java学生信息管理系统的具体代码,实现学生信息:增加int[]a=newint[9]、删除、查找、更改,供大家参考,具体内容如下/*学生信息管理系统,实现学生信息:*增加int[]a=newint[9]*删除*查找*更改*/importjava.util.Scanner;//导入java输入流importjava.lang.*;importja…

    2022年9月16日
    3
  • wannacry病毒作者_wannacry病毒利用了哪种漏洞

    wannacry病毒作者_wannacry病毒利用了哪种漏洞1.样本概况1.1样本信息病毒名称:Trojan-Ransom.Win32.Wanna.m所属家族:木马/勒索/蠕虫MD5:DB349B97C37D22F5EA1D1841E3C89EB4SHA1:E889544AFF85FFAF8B0D0DA705105DEE7C97FE26CRC32:9FBB12271.2测试环境及工具…

    2022年10月9日
    0
  • Windows下LaTeX安装教程与新手入门[通俗易懂]

    Windows下LaTeX安装教程与新手入门[通俗易懂]一、安装教程参考链接:https://blog.csdn.net/jackandsnow/article/details/88407909二、入门教程https://blog.csdn.net/Emily_Buffy/article/details/90180909写的非常详细,也很实用…

    2022年5月4日
    60
  • vue生成二维码并下载[通俗易懂]

    vue生成二维码并下载[通俗易懂]vue生成二维码图片,这里使用的是qrcode.js这个插件1、下载插件npminstall–saveqrcodejs22、组件内使用<template><Buttontype=”primary”size=”small”@click=”getScan()”>扫一扫</Button><Buttontype=”primary”size=”small”@click=”getDownload()”>下载</Bu..

    2022年10月3日
    2

发表回复

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

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