• 前几天我在写一个前端页面的时候,需要用到全屏背景图,但是怎么写都不行(要么不全屏,要么不兼容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. Mybatis内置的日志工厂提供日志功能

    Mybatis内置的日志工厂提供日志功能,具体的日志实现有以下几种工具: SLF4J Apache Commons Logging Log4j 2 Log4j JDK logging 具体选择哪个日志 ...

  2. tkmybatis逆向工程关于tinyint的玄学问题

    数据库中存储的数据类型是tinyint(1) state tinyint(1) 状态0-未完成:1-待提交:2-待支付:3支付失败: 不为空 tinyint(1)存储的时候会存储下面长度的数字 但是在 ...

  3. beta week 2/2 Scrum立会报告+燃尽图 04

    此作业要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/9957 一.小组情况 组长:贺敬文组员:彭思雨 王志文 位军营 徐丽君队名: ...

  4. Springboot websocket使用

    1)基本概念 1.http与websocket http超文本传输协议,大家都非常熟悉,http有1.0.1.1. 2.0几个版本,从http1.1起,默认都开启了Keep-Alive,保持连接持续性 ...

  5. dnSpy PE format ( Portable Executable File Format)

    Portable Executable File Format PE Format  微软官方的 What is a .PE file in the .NET framework? [closed] ...

  6. 如何查看MySQL connection id连接id

    每个MySQL连接,都有一个连接ID,可以通过 connection_id()查看. 连接id也可以通过以下方式查看: show processlist中id列 information_schema. ...

  7. 七十九:flask.Restful之flask-Restful蓝图与渲染模板

    1.flask-Restful与蓝图结合使用如果要在蓝图中使用flask-Restful,那么在创建Api对象的时候,就不应该使用app,而是蓝图,如果有多个蓝图,则需在每一个蓝图里面创建一个Api对 ...

  8. 七十四:flask信号之flask的内置信号

    flask所有的内置信号 1.template_rendered:模板渲染完成后的信号2.before_render_template:模板渲染之前的信号3.request_started:模板开始渲 ...

  9. Git(5):其他用法

    分支操作 (1) 删除远程分支 $git remote add origin ssh://git@xxx.git ##如果未连接远程分支要先连接 $git push origin :<remot ...

  10. JavaScript(1)——编程真善美

    编程真善美 命名风格: 驼峰命名法 小驼峰法 变量一般用小驼峰法标识.驼峰法的意思是:除第一个单词之外,其他单词首字母大写:camelCase 大驼峰法(即帕斯卡命名法) 相比小驼峰法,大驼峰法把第一 ...