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中的 ...
随机推荐
- Linux 服务器安装jdk,mysql,tomcat简要教程
linux服务器是阿里云上买的,学生价9.9/月,拿来学习下. 需要准备软件工具: 1.editplus (编辑服务器上的文件) 2.PuTTY (Linux命令连接器) 3.FlashFXP(上传文 ...
- ARTS打卡计划第五周
Algorithms: https://leetcode-cn.com/problems/longest-substring-without-repeating-characters/ 采用了map的 ...
- Java多线程-线程中止
不正确的线程中止-Stop Stop:中止线程,并且清除监控器锁的信息,但是可能导致 线程安全问题,JDK不建议用. Destroy: JDK未实现该方法. /** * @author simon * ...
- 快速查找 js 插件
我们是否为一个插件找半天找不到而烦恼 BootCDN 现在不用了,我们可以在 https://www.bootcdn.cn/ 中查找我们想要的任何插件,然后点进去,一直到点进去文件,我们便可以得到 这 ...
- koa 基础(十)原生node.js 在 koa 中获取表单提交的数据
1.app.js // 引入模块 const Koa = require('koa'); const router = require('koa-router')(); /*引入是实例化路由 推荐*/ ...
- GitHub:Baidu
ylbtech-GitHub:Baidu 1.返回顶部 · duedge-recipes DuEdge百度边缘网络计算样例代码 edgeedge-computingduedge JavaScri ...
- 阶段3 3.SpringMVC·_06.异常处理及拦截器_4 SpringMVC拦截器之介绍和搭建环境
拦截器可以有多个 搭建环境 不用改,直接finish 复制原来项目的 依赖的包也复制过来 web.xml配置前端控制器 springmvc的配置文件 先创建对应的文件夹 分别创建java和resour ...
- JAVA VUser
JAVA VUser 一.java虚拟用户协议 java虚拟用户脚本主要有Java Vuser.Corba-Java.RMI-Java.EJB等类型.这些类型的虚拟用户脚本均可以用java语言来手工编 ...
- ESP32开发之Windows开发环境
电脑出了问题linux系统下的环境不知道怎么就挂了,在一次搭建,总是出错,没办法,只能在win10下一试. 1 下载交叉编译工具,最新版 找到并下载最新的工具链: https://dl.espress ...
- selenium三种断言以及异常类型
elenium提供了三种模式的断言:assert .verify.waitfor 1)Assert(断言) 失败时,该测试将终止. 2)Verify(验证) 失败时,该测试将继续执行,并将错误记入日志 ...