css背景图自适应全屏显示
- 前几天我在写一个前端页面的时候,需要用到全屏背景图,但是怎么写都不行(要么不全屏,要么不兼容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背景图自适应全屏显示的更多相关文章
- 【Python全栈-CSS】CSS实现网页背景图片自适应全屏
CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...
- Android Studio gridview 控件使用自定义Adapter, 九宫格items自适应全屏显示
先看效果图,类似于支付宝首页的效果.由于九宫格显示的帖子网上已经很多,但是像这样九宫格全屏显示的例子还不是太多.本实例的需求是九宫格全屏显示,每个子view的高度是根据全屏高度三等分之后自适应高度,每 ...
- CSS实现网页背景图片自适应全屏
一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...
- CSS实现网页背景图片自适应全屏,自适应背景图片
一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...
- css背景图自适应
在开发时,修改了d2admin的登录页面.使用了背景图片,但是ui给的图过于大(可能是我电脑屏幕小哈)无法完整的显示到页面上,所以修改了代码,可以完整显示背景图. 代码如下:background: u ...
- 纯css背景图自适应
只需要这样设置即可,只要你的图片足够大的话可以无限缩小,当不在缩小的时候则跟你的实际图片大小有关系
- echarts 饼图 + 全屏显示
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 【温故而知新-Javascript】窗口效果 (全屏显示窗口、定时关闭窗口)
1.全屏显示窗口 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- css背景图与html插入img的区别
一直以来都认为css背景图与直接插入img图片的效果是差不多的,直到最近拜读了一位大神的作品,发现大部分图片都是通过背景图形式显示的,于是通过搜索各相关资料,在此总结了下二者的区别: 1. css中的 ...
随机推荐
- vue绑定样式
使用三目运算符绑定样式 本来以为使用vue模版写法,在绑定单个样式,也就是一个class类名的时候可以直接书写,就像这样 <div id="app"> <div ...
- Maven-指定要打包的文件
在项目 pom.xml 中指定 <build> <resources> <resource> <!--控制资源目录下要打包进去的文件,这里为全部打包--> ...
- 记录一次python的mysqlclient依赖库报错问题
描述: 最开始在测试环境装了mysql8,用来作为airflow后端的metadata存储: 在装了mysql8之后,通过pip3安装了mysqlclient=1.3.14:但是安装过程是在单独的ve ...
- java:面向对象(多态,final,抽象方法,(简单工厂模式即静态方法模式),接口)
* 生活中的多态:同一种物质,因环境不同而表现不同的形态. * 程序中多态:同一个"接口",因不同的实现而执行不同的操作. * 多态和方法的重写经常结合使用,子类重写父类的方法,将 ...
- Python爬虫学习==>第五章:爬虫常用库的安装
学习目的: 爬虫有请求库(request.selenium).解析库.存储库(MongoDB.Redis).工具库,此节学习安装常用库的安装 正式步骤 Step1:urllib和re库 这两个库在安装 ...
- 【HANA系列】SAP HANA SQL合并多行操作
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA SQL合并多行 ...
- LeetCode.1071-字符串最大公约数(Greatest Common Divisor of Strings)
这是小川的第391次更新,第421篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第253题(顺位题号是1071).对于字符串S和T,当且仅当S = T + ... + T ...
- 应用安全 - 编程语言 | 框架 - PHP - Djiango - 漏洞 -汇总
CVE-2007-0404 Date , 类型Filename validation issue in translation framework. Full description 影响范围 CVE ...
- 快速排序基本思想,递归写法,python和java编写快速排序
1.基本思想 快速排序有很多种编写方法,递归和分递归,分而治之法属于非递归,比递归简单多了.在这不使用代码演示.下面我们来探讨一下快速排序的递归写法思想吧. 设要排序的数组是A[0]……A[N-1], ...
- 【DSP开发】【计算机视觉】EMCV:可在DSP上运行的OpenCV
EMCV:可在DSP上运行的OpenCV EMCV项目主页: http://sf.net/projects/emcv EMCV全称为Embedded Computer Vision Library,是 ...