• 前几天我在写一个前端页面的时候,需要用到全屏背景图,但是怎么写都不行(要么不全屏,要么不兼容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. 安装两个版本的python安装包,后安装的python程序打开时闪退

    1.环境变量的问题 (Win7)右键打开“计算机”的属性设置→高级系统设置→环境变量.  在系统变量中的path中,编辑,在末尾加入Python的安装路径“F:\Python27”, 路径与路径之间使 ...

  2. Mybatis不使用Spring框架(Druid)

    1.Mysql database CREATE TABLE mockrecord (id INT(10) unsigned PRIMARY KEY NOT NULL COMMENT 'mock记录编号 ...

  3. MAMP 环境下安装Redis扩展

    1. 下载对应版本的 php 源码,(当前使用版本是 php5.6.30 )版本号最后一位有点区别不影响链接:http://php.net/get/php-5.6.31.tar.bz2/from/a/ ...

  4. php下intval()和(int)转换使用与区别

    没啥区别,一般用(int),另外还有 float, string, array 等 intval()而言,如果参数是字符串,则返回字符串中第一个不是数字的字符之前的数字串所代表的整数值.如果字符串第一 ...

  5. npm转成别的下载地址的插件

    第一种方式 1. 查看当前计算机的下载地址 npm get registry 2. 修改为淘宝npm镜像 npm config set registry http://registry.npm.tao ...

  6. Android jni/ndk编程五:jni异常处理

    在Java的编程中,我们经常会遇到各种的异常,也会处理各种的异常.处理异常在java中非常简单,我们通常会使用try-catch-finally来处理,也可以使用throw简单抛出一个异常.那么在jn ...

  7. Log4J日志组件

    Log4j,  log for java, 开源的日志组件! 使用步骤: 1. 下载组件,引入jar文件; log4j-1.2.11.jar 2. 配置 :  src/log4j.properties ...

  8. SQL学习(七)试图

    试图是基于SQL语句的结果集的可视化表. 1.创建试图 create view 试图名 as select 语句 如: create view ticketresult as select * fro ...

  9. Jmeter测试结果分析(上)

    Jmeter测试结果分析这一篇,我打算分成上下两部分.上篇,主要讲述如何使用jmeter中Assertion对结果进行简单的分类:下篇,主要讲述的是当我们拿到测试结果后,我们应该如何去看待这些测试结果 ...

  10. spring boot系列(一)spring boot 初识

    什么是spring boot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员 ...