#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. 利用Socket 客户端---->服务端 传送文件到指定路径,并返回一个友好的回馈

    首先盲写的一个传输文件的方法,但测试发现了一个非常不容易发现的问题,这里先说明一下. 错误的代码如下: package com.TCP.java; import java.io.File; impor ...

  2. Font Awesome使用方法

    Font Awesome(中文站点)是一套为Bootstrap而创造的图标字体库及CSS框架,在业界享有盛誉. FA包含了常规web开发所需要用到的几乎所有图标,并且免费授权使用,只需要下载即可.所有 ...

  3. [bzoj5118]Fib数列2_费马小定理_矩阵乘法

    Fib数列2 bzoj-5118 题目大意:求Fib($2^n$). 注释:$1\le n\le 10^{15}$. 想法:开始一看觉得一定是道神题,多好的题面啊?结果...妈的,模数是质数,费马小定 ...

  4. sync_binlog=1

    MySQL提供一个sync_binlog参数来控制数据库的binlog刷到磁盘上去. sync_binlog=0,表示MySQL不控制binlog的刷新,由文件系统自己控制它的缓存的刷新.这时候的性能 ...

  5. C#版winform实现UrlEncode

    在Asp.net中可以使用Server.HTMLEncode和Server.URLEncode 将文本或URL的特殊字符编码,但在控制台或Winform程序中没有办法使用到这些方法, 解决办法:右击项 ...

  6. HDU 4531

    很容易判断是BFS,可是,呵呵呵呵呵呵......... HASH判重吧,判连通可以用并查集. 以下代码是转别人的,我码了一下午,发觉越码越丑,呵呵了. http://www.cnblogs.com/ ...

  7. Window上python 开发--1.搭建开发环境

    事实上在开发python最好在ubuntu环境下,简单也便于扩展各个package.可是我的linux的电脑临时不在身边.还的我老婆的电脑win7没办法啊. 因为python的跨平台性.在window ...

  8. 常用框架(一):spring+springMvc+mybatis+maven

    项目说明: (1) 本例采用 maven web 工程做例子讲解 (2) 利用mybaits 提供的代码生成工具自动生成代码(dao接口,sql mapper映射文件,pojo数据库映射类) (3) ...

  9. bzoj4240: 有趣的家庭菜园(树状数组+贪心思想)

    4240: 有趣的家庭菜园 题目:传送门 题解: 好题!%%% 一开始不知道在想什么鬼,感觉满足二分性?感觉可以维护一个先单调增再单调减的序列? 然后开始一顿瞎搞...一WA 看一波路牌...树状数组 ...

  10. Getting started with ASP.NET Core MVC and Visual Studio

    This tutorial will teach you the basics of building an ASP.NET Core MVC web app using Visual Studio ...