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页面中各个层级的下方
background-repeat: no-repeat;
上面这个是背景不要重复
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
上面三句是一个意思,就是让图片随屏幕大小同步缩放,但是有部分可能会被裁切,不过不至于会露白,下面两句是为chrome和opera浏览器作兼容。
background-position: center 0;
上面这句的意思就是图片的位置,居中,靠左对齐。
css如何让图片全屏显示?相关推荐
- 完美的css背景图片全屏显示,能比例缩小,不留空白
简介:完美的css背景图片全屏显示,能比例缩小,不留空白,我们之前已经知道了可调整大小的背景图片的概念.但是读者DougShults发给了我一个链接,其中使用了非常酷的技术,我觉得这种技术要比之前的任 ...
- css 全屏显示一张图片_css3背景图片全屏显示的例子
背景图片全屏这个功能只需要定义重复即可解决了当然这个是有一些技巧了,下面我们就来看一篇关于css3背景图片全屏显示例子了,具体的如下所示. 如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题 ...
- css背景图片全屏显示加居中显示
css背景图片全屏显示加居中显示,屏幕过大平铺 屏幕过小居中裁剪 div { background:url(/i/bg_flower.gif); background-size:cover; -moz ...
- 微信小程序背景图片全屏显示
微信小程序背景图片全屏显示 很多人在写小程序界面的时候希望背景图片是全屏覆盖显示的(包括顶部导航栏,如下图),那该如何实现呢? 以下是实现代码: wxml代码: <view class=&quo ...
- 微信小程序页面添加背景图,图片全屏显示
前言 微信的wxss里面不允许使用使用 background: url(),只能另外找方法进行背景图片显示. 方法 1.wxss页面里面设置页面的全屏宽高,以及view添加宽高 page{height ...
- 怎么让电脑上的图片全屏显示呢
怎么让电脑上的图片全屏显示呢 利用 windows 图片查看器打开图片,然后按 F11 键,即可 本文转自 烂泥行天下 51CTO博客,原文链接:http://blog.51cto.com/ilann ...
- 3种CSS实现背景图片全屏铺满自适应的方式
来源 | https://www.fly63.com/ 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景 ...
- uniapp 背景图片全屏显示在整个页面
要让uniapp中的背景图片全屏,可以在<style>标签中添加以下样式: page {background-image: url('/static/bg.jpg');background ...
- html实现点击图片全屏显示,用vue实现点击图片预览浏览器满屏大图
前提 安装插件 npm install vue-directive-image-previewer -D 引入插件 import VueDirectiveImagePreviewer from 'vu ...
最新文章
- C#使用sharppcap实现网络抓包-----2
- CTFshow php特性 web90
- 【行业趋势】国内这10个AI研究院,你想好去哪个了吗?
- NSInteger与int的区别
- java 组合对象_Java 中组合模型之对象结构模式的详解
- 少儿编程线下培训水到渠成了吗?2018
- Ubuntu14.04中踩过的坑
- Centos7安装dig命令
- LINUX邮件服务器
- NSString类中三个用于获取子字符串的方法:
- 《迎接互联网的明天——玩转3D Web》
- mac 修改vmware的NAT网关
- 为什么要选择crm私有化布署?
- Python原来有三大神器
- C语言踢出字符,《懂球堂》| 大写的C字!如何踢出C罗一样的任意球
- ubuntu16.04火狐浏览器B站提示下载flash插件
- openmv和stm32串口通信完成二维码识别
- java并发编程-进程和线程调度基础
- 携程 Apollo 配置中心 | 学习笔记(七) | 如何将配置文件敏感信息加密?
- 物联网技术部培训---贪心算法