#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. 解决Chrome在隐身模式下无法播放Flash视频

    在地址栏输入: chrome://flags/#prefer-html-over-flash 打开如下界面,并设置成如下所示: 然后点击左下方重启按钮: 参考: http://www.cnblogs. ...

  2. iostat -x 1 查看磁盘的IO负载

    Linux系统出现了性能问题.一般我们能够通过top.iostat,vmstat等命令来查看初步定位问题.当中iostat能够给我们提供丰富的IO状态数据 $ iostat -x -1  avg-cp ...

  3. [Angular] N things you might don't know about Angular Route

    Prevent Partail Page display: By using Resolver: @Injectable() export class MovieResolver implements ...

  4. android中LocalBroadcastManager的使用

    今天遇到一个acitivity之间通信的问题,因为我们是用TabActivity包裹了Activity(我们称之为A).所以这两个Activity是同一时候存在的.当在TabActivity中启动其它 ...

  5. Cocos2d-X直接使用OpenGL接口

    Cocos2d-X是基于基于OpenGL ES的2D游戏引擎,所以Cocos2d-X能够直接使用OpenGL接口 首先建立一个Draw类,用于处理OpenGL接口 在Draw.h中加入以下的代码 #i ...

  6. Ubuntu安装及ubuntu系统使用菜岛教程

    Ubuntu是一款广受欢迎的开源Linux发行版,和其他Linux操作系统相比,Ubuntu非常易用,和Windows相容性很好,非常适合Windows用户的迁移,在其八年的成长过程中已经获得了两千多 ...

  7. Could not read from remote repository.

    今天换新电脑,忘了配置git环境,就去gitserver上代替码.然后一直报错,后来就又一次配置了git环境.步骤例如以下 damingwuage:Desktop damingwuage$ ssh-k ...

  8. Windows下搭建ffmpeg+VS2008开发环境详细教程【转】

    本文转载自:http://www.voidcn.com/article/p-vxdntdgc-bkq.html 由于个人是从事音视频开发相关的工作,所以也把自己的一些过程写下来,方便大家以及自己查看, ...

  9. python简易版学生管理系统

    #coding=utf- def showInfo(): print("**************") print(" 学生管理系统") print(&quo ...

  10. C#操作Mysql类

    using System;using System.Collections.Generic;using System.Text;using System.Data;using System.Text. ...