#demo{
  background-img:url(../bg.png);
    --(1)适用于上半部分背景图片,下半部分纯色
将背景图像等比缩放到完全覆盖屏幕,背景图有可能超出屏幕(容器)
    background-size:cover;

   --(2)将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。
   background-size:contain;
   --(3)最简单粗暴的方法,缺点会给背景拉伸变形;
   background-size:100%  100%;
}

CSS背景图怎么自适应全屏(手机或者电脑)的更多相关文章

  1. CSS背景图拉伸自适应尺寸,全浏览器兼容

    突然有人问我这个问题,说网上CSS filter的方法在非IE浏览器下不奏效.思考之后,问题之外让我感慨万千啊,很多我们所谓的难题,都会随着时代的发展迎刃而解,或被新的问题所取代. 当CSS背景图片拉 ...

  2. CSS背景图拉伸自适应尺寸

    .bg{ background:url(images/test.jpg); filter:"progid:DXImageTransform.Microsoft.AlphaImageLoade ...

  3. 【Python全栈-CSS】CSS实现网页背景图片自适应全屏

    CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...

  4. css背景图与html插入img的区别

    一直以来都认为css背景图与直接插入img图片的效果是差不多的,直到最近拜读了一位大神的作品,发现大部分图片都是通过背景图形式显示的,于是通过搜索各相关资料,在此总结了下二者的区别: 1. css中的 ...

  5. Lodop打印控件不打印css背景图怎么办

    background:url()这是css背景图,http协议会按异步方式下载背景图,所以很容易等不到下载完毕就开始打印了,故lodop不打印css背景图.Lodop不打印css背景图,但是有其他方法 ...

  6. html的css背景图的repeat

    HTML里background-image中,可以设置background-repeat实现平铺,前面博文中关于css样式换行的(相关博文:超文本css样式换行),其中有个三个div组合的,中间的di ...

  7. css背景图自适应全屏显示

    前几天我在写一个前端页面的时候,需要用到全屏背景图,但是怎么写都不行(要么不全屏,要么不兼容Bootstrap的响应式布局).对,是我腊鸡 后来我在网上找的时候找到一个大神写的笔记,参(照)考(抄)之 ...

  8. CSS实现网页背景图片自适应全屏

    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...

  9. CSS实现网页背景图片自适应全屏,自适应背景图片

    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...

随机推荐

  1. (37)Spring Boot集成EHCache实现缓存机制【从零开始学Spring Boot】

    [本文章是否对你有用以及是否有好的建议,请留言] 写后感:博主写这么一系列文章也不容易啊,请评论支持下. 如果看过我之前(35)的文章这一篇的文章就会很简单,没有什么挑战性了. 那么我们先说说这一篇文 ...

  2. asp.net--常用的数据库链接字符串

    本地连接 privatestring conn_string ="Data Source=localhost;Initial Catalog=SQLtest;Integrated Secur ...

  3. [bzoj2938][Poi2000]病毒_AC自动机

    病毒 bzoj-2938 Poi-2000 题目大意:给你n个01串,问是否存在一个无限长的01串使得这个01的任意子串都不等于给出的01串. 注释:All_length<=30,000 想法: ...

  4. 好纠结啊,JeeWx商业版本号和开源版本号有什么差别呢?

    好纠结啊,JeeWx商业版本号和开源版本号有什么差别呢? JeeWx开源版本号是一套基础微信开发平台.有基础的微信菜单.素材管理.微信对接等基础功能,适合于开发人员学习研究. JeeWx商业版本号是一 ...

  5. Hook的两个小插曲

    看完了前面三篇文章后,这里我们来一个小插曲~~~~ 第一个小插曲.是前面文章一个CM精灵的分析.我们这里使用hook代码来搞定. 第二个小插曲,是如今一些游戏,都有了支付上限,比如每天仅仅能花20块钱 ...

  6. MongoDB 索引的使用, 管理 和优化

    MongoDB 索引的使用, 管理 和优化 2014-03-25 17:12 6479人阅读 评论(0) 收藏 举报  分类: MongoDB(9)  [使用explain和hint] 前面讲高级查询 ...

  7. Java缓存server调优

    搜索降级方案中xmn開始使用bizer默认的128M,很慢. 偶然改成1G,效果立刻上来,可是xmx调大并没有明显效果.                  100并发             200并 ...

  8. oc24--description

    // Person.h #import <Foundation/Foundation.h> @interface Person : NSObject { int _age; double ...

  9. html页面、canvas导出图片

    背景:项目现场提出将一个html做的图形页面导出为一张图片的需求,在网上搜了一下,发现都不是很全面,所以综合了很多大神的帖子,自己再次封装,以适用项目需求. 所需js库:html2canvas.js( ...

  10. web 端即时通讯

    1. 前言 Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Serve ...