有时候我们加入背景图片时,会由于图片的大小不一致,导致图片进行平铺,以下代码可以解决这个问题

<style> body {background:url("./images/background.jpg")  no-repeat center center;   /*加载背景图*/   /* 背景图不平铺 */background-size:cover;  /* 让背景图基于容器大小伸缩 */background-attachment:fixed;        /* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */    //此条属性必须设置否则可能无效/background-color:#CCCCCC;   /* 设置背景颜色,背景图加载过程中会显示背景色 */}</style>

HTML让背景图片铺满整个图片相关推荐

  1. 在VB中如何让背景图片铺满整个MDIForm

    在VB中,如何让背景图片铺满整个Form,代码如下: '* ************************************************************** * '*    ...

  2. HTML+CSS实现背景图片铺满页面的方法

    HTML+CSS实现背景图片铺满页面的方法 针对页面背景图片我整理了几种方法仅供参考 一.DIV中添加背景图片 二.img中设置背景图片 三.Body中设置背景图片 结语 针对页面背景图片我整理了几种 ...

  3. php如何把图片铺满,用Dreamweaver8设计网页,怎样使背景图片铺满全屏?

    楼主说的是要背景图片只出现一次,而且是铺满全屏的吧!这是不可能的,背景图片是不能用代码控制它的大小的,它是多大,做背景的时候就只能是多大!最多是重复N个图片 我们在网页制作过程中,尤其是初学的人们读喜 ...

  4. VUE动态变换背景图片的实现 +背景图片铺满+ 一般路由的配置

    一 .动态变换背景图片的实现 代码如下: <template><div class="body" v-loading="loading" :s ...

  5. 利用css将背景图片铺满整个屏幕

    方法一: <!DOCTYPE html> <html><head><meta charset="UTF-8"><meta ht ...

  6. 网页背景图片铺满手机屏幕

    主要用于网页端开发页面,图片需要适应手机屏幕大小的场景(但是不推荐手机和PC端使用一套前端) 一 效果图 二 代码 <!DOCTYPE html> <html> <hea ...

  7. 写网页的那些小总结——背景图片透明,背景图片铺满页面

    1.使用opacity属性会让背景图片和盒子中的文字内容都透明,如果想要背景图片透明,文字内容不透明,就可以使用以下代码: 某例子: background: rgba(255,255,255,0.6) ...

  8. web图片铺满网页_css怎么让图片铺满?

    css让图片铺满的方法:可以使用background-size:cover样式设置背景图片铺满.background-size属性规定背景图像的尺寸. background-size 属性: back ...

  9. Android 使用图片铺满某个区域

    /*** 使用图片铺满某个区域,返回整个铺满的图片* @param src 原图片* @param rect 要铺满的区域大小*/public static Bitmap getTile(Bitmap ...

最新文章

  1. Ubuntu 将 /home 或 /var 目录挂载到新的分区
  2. R语言ggplot2可视化:为可视化图像添加多行标题(multi line title)并将多行标题居中对齐(center align)
  3. window下从硬盘安装ubuntu双系统
  4. 马自达新车全面取消触摸屏,意外引得叫好声一片
  5. Ansible — Modules
  6. java scanner 用不了_java Scanner具有神奇的作用可惜大部分java开发人员不知
  7. 1.1 决策树算法原理
  8. ROS + OpenCV
  9. 【java】强悍!Java 9 中的9个新特性
  10. 使用FFmpeg将m4s文件转为mp4 ——哔哩哔哩缓存转码
  11. wxpython控件旋转_wxPython修改文本框颜色过程解析
  12. matlab fisher z变换,关于GCA统计
  13. 深入浅出OpenGL三维渲染管线
  14. 第三方支付原理与概述
  15. ToC战场进入尾声,ToB市场战争厮杀即将升级?
  16. android 淘宝登陆授权
  17. python修改悦跑圈数据_悦跑圈数据导出 悦跑圈新版本支持跑表、跑步机数据接入 - 电脑常识 - 服务器之家...
  18. 在互联网上传输文件 —— FTP协议
  19. FXO和FXS的区别
  20. 计算机主机的拆卸步骤,电脑清灰详细图文教程解说

热门文章

  1. 学Python爬虫,就得从爬高清美图开始!
  2. 30_Python基础_异常
  3. 从零搭建uniapp app,适合小白,傻瓜化,页面搭积木可视化创建
  4. 《Windows核心编程》读书笔记四 进程
  5. 干货分享 | B站SLO由失败转成功,B站SRE做对了什么?
  6. ESP-01S烧录MQTT固件连接阿里云
  7. 新生入学了,针对腾讯的产品全民K歌(或QQ空间、腾讯游戏......)做一次推广活动,包括产品功能设计和运营活动推广方案。
  8. 五款微信编辑器优缺点评测
  9. 我教女朋友学编程Html系列(6)—Html常用表单控件
  10. linux怎样收集系统信息,Linux下收集系统和硬件信息的10个实用命令