CSS实现网页背景图片自适应全屏,自适应背景图片
一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动。
以下是用CSS实现的方法:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>title</title>
</head>
<body>
<div class="wrapper">
<!--背景图片-->
<div id="web_bg" style="background-image: url(./img/bg.jpg);"></div>
<!--其他代码 ... -->
</div>
</body>
</html>
CSS:
#web_bg{
position:fixed;
top: 0;
left: 0;
width:100%;
height:100%;
min-width: 1000px;
z-index:-10;
zoom: 1;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
下面,我们来分析一下,css中每句代码的作用是什么:
position:fixed;
top: 0;
left: 0;
这三句是让整个div固定在屏幕的最上方和最左方
width:100%;
height:100%;
min-width: 1000px;
上面前两句是让整个div跟屏幕实现一模一样的大小,从而达到全屏效果,而min-width是为了实现让屏幕宽度在1000px以内时,div的大小保持不变,也就是说在这种情况下,缩放屏幕宽度时,图片不要缩放(只有在1000px以内才有效)。
z-index:-10;
这个的目的是让整个div在HTML页面中各个层级的下方,正常情况下,第一个创建的层级z-index的值是0,所以如果我们这里写成-1也可以实现,不过这里写-10是确保整个div在最下面,因为如果页面中层级太多了,有的时候用-1不一定在最下面,但如果写成-100这样大数字的也没有什么意义。用index:-10 以此能达到看上去像背景图片,其实是一个最普通的div,只是层级关系变了,才让人看上去看是背景图片。
background-repeat: no-repeat;
上面这个是背景不要重复
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
上面三句是一个意思,就是让图片随屏幕大小同步缩放,但是有部分可能会被裁切,不过不至于会露白,下面两句是为chrome和opera浏览器作兼容。
background-position: center 0;
上面这句的意思就是图片的位置,居中,靠左对齐。
转载:https://www.jianshu.com/p/5480cd1a5d89
CSS实现网页背景图片自适应全屏,自适应背景图片的更多相关文章
- 【Python全栈-CSS】CSS实现网页背景图片自适应全屏
CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...
- HTML5轻松实现全屏视频背景
想在你的网页首页中全屏播放一段视频吗?而这段视频是作为网页的背景,不影响网页内容的正常浏览.那么我告诉你有一款Javascript库正合你意,它就是Bideo.js. 参考网址: https://ww ...
- 点击图片video全屏
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- CSS实现网页背景图片自适应全屏
一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...
- css背景图自适应全屏显示
前几天我在写一个前端页面的时候,需要用到全屏背景图,但是怎么写都不行(要么不全屏,要么不兼容Bootstrap的响应式布局).对,是我腊鸡 后来我在网上找的时候找到一个大神写的笔记,参(照)考(抄)之 ...
- CSS背景图怎么自适应全屏(手机或者电脑)
#demo{ background-img:url(../bg.png); --(1)适用于上半部分背景图片,下半部分纯色 将背景图像等比缩放到完全覆盖屏幕,背景图有可能超出屏幕(容器) backgr ...
- 网页frame引入实现全屏滚动,使用jquery实现浏览器兼容
近期做一个项目,其中有一个需求,就是网页中需要用frame引入页面并实现frame的全屏,在网上查了好多感觉方式都不尽相同,但是都不是介绍的很全面,浏览器的兼容也做的不好,自己总结了一些要点,需要的可 ...
- 最全面的DialogFragment的使用,实现DialogFragment全屏、背景透明;
Android推荐使用DialogFragment代替Dialog,好处就说一点吧,DialogFragment就是个盖在界面上的Fragment,它拥有Fragment一样的功能和生命周期,解决普通 ...
- Android 实现九宫格、点击图片放大全屏浏览等
项目GitHub地址https://github.com/tikeyc/TNinePlaceGridView_Android https://github.com/tikeyc/TikeycAndro ...
随机推荐
- ACM-ICPC 2017 西安赛区现场赛 A. XOR(线性基+线段树)
题目链接:https://nanti.jisuanke.com/t/20749 参考题解:https://blog.csdn.net/Lee_w_j__/article/details/8266418 ...
- 12、redis部分
- 题解 [CF891C] Envy
题面 解析 首先根据Kruskal算法, 我们可以知道, 在加入权值为\(w\)的边时, 权值小于\(w\)的边都已经加进树里了(除了连成环的). 所以,我们可以保存一下每条边的端点在加入生成树之前的 ...
- Luogu P2114_[NOI2014]起床困难综合症 贪心
思路:按位贪心. 提交:1次 题解: 可以先处理出对于全$0$串和全$1$串最后每一位的结果.(每一位 从 $0$ $or$ $1$ 变成 $0$ $or$ $1$) 对于每一位,若不能变成$1$,则 ...
- http method
get: 获取资源get方法用来请求访问已被URL识别的资源 post: 传输实体主体POST方法用来传输实体的主体 put: 传输文件PUT方法用来传输文件. head: 获取报文首部head方法与 ...
- [Luogu] 时间复杂度
https://www.luogu.org/problemnew/show/P3952 考场上输出的是 "YES" "NO" ++ ,如果不是亲身经历,打死我我 ...
- javascript数据结构之单链表
下面是用javascript实现的单链表,但是在输出的时候insert方法中存在问题,chrome的console报错说不能读取空的属性,调试了很久都没有通过,先在这里存着,以后再来修改一下. //数 ...
- 最近公共祖先lca模板
void dfs(int x,int root){//预处理fa和dep数组 fa[x][0]=root; dep[x]=dep[root]+1; for(int i=1;(1<<i)&l ...
- Django1.6 + jQuery Ajax + JSON 实现页面局部实时刷新
最近微信公众帐号要扩展做一个签到系统,签到结果在一个网页上实时更新,即页面局部刷新.我想用Ajax来实现,之前公众帐号是用的Django搭的,我查找了Django的官方文档,没有封装Ajax.网上有各 ...
- mac安装genymotion遇到的问题记录
1.出错内容:An error occured while deploying the file或者使用adb devices连接的时候出现下面的错误 adb server version (40) ...