• 前几天我在写一个前端页面的时候,需要用到全屏背景图,但是怎么写都不行(要么不全屏,要么不兼容Bootstrap的响应式布局)。对,是我腊鸡

    后来我在网上找的时候找到一个大神写的笔记,参(照)考(抄)之后完美显示,依照大神所说还“不失真”(虽然我不管失不失真)。

笔记如下:

body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: url(../img/bg.jpg) no-repeat center 0px;
background-size: cover; background-position: center 0;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover; }

感谢大佬:

生于忧患,死于安乐2017 https://blog.csdn.net/qq_41325698/article/details/84190747

css背景图自适应全屏显示的更多相关文章

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

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

  2. Android Studio gridview 控件使用自定义Adapter, 九宫格items自适应全屏显示

    先看效果图,类似于支付宝首页的效果.由于九宫格显示的帖子网上已经很多,但是像这样九宫格全屏显示的例子还不是太多.本实例的需求是九宫格全屏显示,每个子view的高度是根据全屏高度三等分之后自适应高度,每 ...

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

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

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

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

  5. css背景图自适应

    在开发时,修改了d2admin的登录页面.使用了背景图片,但是ui给的图过于大(可能是我电脑屏幕小哈)无法完整的显示到页面上,所以修改了代码,可以完整显示背景图. 代码如下:background: u ...

  6. 纯css背景图自适应

    只需要这样设置即可,只要你的图片足够大的话可以无限缩小,当不在缩小的时候则跟你的实际图片大小有关系

  7. echarts 饼图 + 全屏显示

    效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  8. 【温故而知新-Javascript】窗口效果 (全屏显示窗口、定时关闭窗口)

    1.全屏显示窗口 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

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

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

随机推荐

  1. 0.JQuery学习

    jQuery 教程 jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. jQuery 简介 jQuery 库可以通过一行简单的标记被添加到网页中 ...

  2. Python中列表操作进阶及元组

    列表高级操作 一.遍历列表 >>> ls=['a','d','it'] >>> for val in ls: ... print (val) ... a d it ...

  3. PHP JSON数据 AJAX

    JSON数据的定义方式 //写入数据 var a = { code:"p001", name:"张三", shuzu:new Array(1,2,3,4), j ...

  4. np.where()

    numpy.where (condition[, x, y]) numpy.where()两种用法 1. np.where(condition, x, y) 满足条件(condition),输出x,不 ...

  5. linuxs上mono

    当前,在Linux系统上架设ASP.NET网站.建设WEB应用工程项目已经在国内流行起来,而“Mono+Jexus”架构模式是Linux承载ASP.NET企业级应用的极为重要的架构方式,这种架构中,J ...

  6. qt liunx 安装命令

    qt SDK : apt-get install qt-sdkqt 安装 : apt-get install qtcreator文档安装 : cmake kdelibs5-data subversio ...

  7. 阶段3 3.SpringMVC·_07.SSM整合案例_06.ssm整合之编写MyBatis框架

    需要先搭建Mybits的环境. 用Mybits的注解的方式.把两个方法的sql语句写完 SqlMapConfig.xml resources下新建xml文档 把约束粘贴过来 两步操作 环境标签叫做en ...

  8. dbgrid中移动焦点到指定的行和

    dbgrid是从TCustomGrid继承下来的,它有col与row属性,只不过是protected的,不能直接访问,要处理一下,可以这样: TDrawGrid(dbgrid1).row:=row;  ...

  9. Linux0.11之进程0创建进程1(1)

    进程0是由linus写在操作系统文件中的,是预先写死了的.那么进程0以后的进程是如何创建的呢?本篇文章主要讲述进程0创建进程1的过程. 在创建之前,操作系统先是进行了一系列的初始化,分别为设备号.块号 ...

  10. 创建podspec文件,为自己的项目添加pod支持

    Cocoapods作为iOS开发的包管理器,给我们的开发带来了极大的便利,而且越来越多的第三方类库支持Pod,可以通过Pod傻瓜式的集成到自己的工程中,那么问题来了,我自己也有一系列的小工具类,怎么让 ...