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中的 ...
随机推荐
- BZOJ1123 BLO
割点的好题. 联通图,难度降低.首先对于一个点,如果他不是割点,那它的贡献是2*(n-1),就是任何一个其他节点都少了正反两个数对,这个看样例可以看出来. 如果它是一个割点,去掉他以后会出现若干个联通 ...
- oracle 中使用 pl/sql代码块
1.写匿名块,输入三角形三个表的长度.在控制台打印三角形的面积. declare -- (p=(a+b+c)/2) --声明三角形的面积 三条边 的 v_a number (10,2):=&n ...
- HighCharts 动态设置 series
var series = new Array(); var map = response.extend.map; $.each(map, function (key,values) { series. ...
- Nginx数据结构之红黑树ngx_rbtree_t
1. 什么是红黑树? 1.1 概述 红黑树实际上是一种自平衡二叉查找树. 二叉树是什么?二叉树是每个节点最多有两个子树的树结构,每个节点都可以用于存储数据,可以由任 1 个节点访问它的左右 子树或父节 ...
- leetcode-hard-ListNode-23. Merge k Sorted Lists
mycode 91.2% # Definition for singly-linked list. # class ListNode(object): # def __init__(self, x ...
- 升级日志sdfsdfsdfsdfsdfdsf
升级日志sdfsdfsdfsdfsdfdsf 升级日志小书匠 版本号 新功能 修改
- springboot ---> spring ioc 注册流程 源码解析 this.prepareContext 部分
现在都是在springboot 中 集成 spirng,那我们就从springboot 开始. 一:springboot 启动main 函数 public static void main(Strin ...
- kubernetes学习:CKA考试认证
考点 CKA认证针对考核成为当业界的Kubernetes管理员所需的技能. CKA认证考试包括这些一般领域及其在考试中的权重: 应用程序生命周期管理 - 8% 安装.配置和验证 - 12% 核心概 ...
- C#反射动态创建实例并调用方法
在.Net 中,程序集(Assembly)中保存了元数据(MetaData)信息,因此就可以通过分析元数据来获取程序集中的内容,比如类,方法,属性等,这大大方便了在运行时去动态创建实例. MSDN解释 ...
- 【Linux开发】【DSP开发】Linux设备驱动之——PCI 总线
PCI总线概述 随着通用处理器和嵌入式技术的迅猛发展,越来越多的电子设备需要由处理器控制.目前大多数CPU和外部设备都会提供PCI总线的接口,PCI总线已成为计算机系统中一种应用广泛.通用的总线标准 ...