html中背景图片等比例缩放,CSS实现响应式全屏背景图+用CSS3实现全屏按比例缩放背景图片...
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
随着逐浪CMS新版的一些效果逐渐放出,有不少的朋友想全屏的背景图片如何设计。
在不同的时代有不同的流行网站显示形式,当前很流行的一种网页形式就是满屏大图,本文将用最简单的方式实现该效果。用到了CSS 属性background-size ,无需javascript。
先看demo,打开后,调整浏览器窗口大小,观察背景图的变化。
如果在你的项目中也需要这样的效果,那么你就来对地方了。
基本语法:
.css{ background-image:url("wood.jpg");background-size:cover;background-repeat: no-repeat;background-attachment: fixed;}核心概念
使用background-size 属性,填充整个viewport
当css属性background-size 值为cover时,浏览器会自动按比例缩放背景图的宽和高,直到大于或等于viewport的宽和高
使用媒体查询为移动设备提供更小尺寸的背景图
为什么要给移动设备提供小尺寸背景图呢?在demo中,我们看到的背景图的实际尺寸为5498px * 3615px,使用这么大尺寸图片的目的是满足绝大多数宽屏显示器,并且不会显示模糊,而代价就是1.7MB的图片体积。
但是在移动设备上没有必要使用这么大的图片,同时大图还会导致加载变慢,尤其是在移动网络下。
需要说明的是:为移动设备提供小背景图对该技术方案来说是可选的。
实践
HTML
后面我们会给body标签指定背景图,这样背景图就可以填充整个浏览器viewport了。
其实,该方案对所有的块级容器都可以生效。如果你的块级容器的宽高是动态的,那么背景图将自动伸缩,充满整个容器。
CSS body标签的样式如下:
body {/* 加载背景图 */background-image: url(images/background-photo.jpg);/* 背景图垂直、水平均居中 */background-position: center center;/* 背景图不平铺 */background-repeat: no-repeat;/* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */background-attachment: fixed;/* 让背景图基于容器大小伸缩 */background-size: cover;/* 设置背景颜色,背景图加载过程中会显示背景色 */background-color: #464646;}
上面最重要的一条就是:
background-size: cover;
这样浏览器就会按比例缩放背景图直至背景图宽高不小于容器的宽高(在上面的例子中,就是body标签)。
这里需要注意的一点就是:如果背景图小于body标签的尺寸(例如在高分辨率显示器上,或页面内容特别多时),浏览器会拉伸图片。我们都知道,当把一个图片拉伸时,图片会变模糊。
因此,在选择背景图时,要特别注意尺寸。为了照顾到大尺寸屏幕,demo里用的图片尺寸为5498px * 3615px 。
同时,为了让背景图始终相对于viewport居中,我们声明了:
background-position: center center;
上面的规则会把背景图缩放的原点定位到viewport的中心。
接下来我们需要解决的问题是:当内容的高度大于viewport的高度时,会出现滚动条。我们希望背景图始终相对于viewport固定,即使用户滚动时也是一样。
解决办法就是:
background-attachment: fixed;(可选)使用媒体查询应对小屏幕
为了应对小屏幕,我用photoshop将背景图按比例缩放到768px * 505px,然后通过smush.it 压缩图片体积。这样就将图片体积从1741KB降到114KB,节省了93%。
下面是媒体查询的写法:
@media only screen and (max-width: 767px) { body { background-image: url(images/background-photo-mobile-devices.jpg); }}
上面的媒体查询将max-width: 767px 设为断点,也就是说当浏览器viewport大于767px时,会使用大背景图,反之使用小背景图。
使用上面媒体查询不利的一面是,如果你把浏览器窗口从1200px缩小到640px(反之亦然),你会看到一个短暂的闪烁,因为小背景图或大背景图正在加载。
html中背景图片等比例缩放,CSS实现响应式全屏背景图+用CSS3实现全屏按比例缩放背景图片...相关推荐
- 在html中写响应式布局的代码,CSS实现响应式布局的方法
用CSS实现响应式布局 响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局 要用的就是CSS中的没接查询,下面就介绍一下怎么运用: 使用@media 的三种方法 1.直接在CSS文件中 ...
- css响应式布局_Web前端新手怎么入门 如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
- window safari 怎么进入响应式_Web前端新手怎么入门 如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
- 如何用一简单的CSS制作响应式HTML网页
如何用简单的CSS制作响应式HTML网页 #故事前端开发 在这篇文章中,我将教你如何使用CSS网格来创建一个超级酷的图像网格,它随着屏幕的宽度而改变列的数量. 最赞的一点就是:这个响应式效果只需要添加 ...
- CSS:响应式下的折叠菜单(条纹式)
2019独角兽企业重金招聘Python工程师标准>>> 原文:CSS: Responsive Navigation Menu 译文:CSS:响应式导航菜单 译者:dwqs 写在之前, ...
- html桌面卡牌效果,html+css实现响应式卡片悬停效果
话不多,看效果先: 卡片悬停,响应式卡片,简约效果. 实现: 1. 定义标签,.kapian为最底层盒子,然后两个子盒子一个放图片,一个放文本: The aurora borealis natural ...
- html 响应式布局怎么实现,CSS实现响应式布局
用CSS实现响应式布局 响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局 要用的就是CSS中的没接查询,下面就介绍一下怎么运用: 使用@media 的三种方法 1.直接在CSS文件中 ...
- html怎么做响应式表格,纯CSS实现响应式表格
自从转岗至腾讯云后,项目中接触到大量的数据表格.多列数据表格在空间有限的手机屏幕下,难以完美呈现,需要做响应式处理.本文介绍一种使用纯CSS实现响应式表格的方法. 通常表格中的一行代表一条项目,每列代 ...
- [css] 说说响应式设计(responsive design)和自适应设计(adaptive design)的区别?
[css] 说说响应式设计(responsive design)和自适应设计(adaptive design)的区别? 响应式是通过视口分辨率识别不同客户端展现不同的布局和内容,一套代码.自适应是通过 ...
- HTML CSS 制作响应式价格表单展示id1075-网页前端设计
HTML & CSS 制作响应式价格表单展示id1075-网页前端设计 源码下载地址 在新演示地址 html <a class="maxbutton-3 maxbutton&q ...
最新文章
- Xcode 7错误:“缺少iOS分发签名身份...”
- 图片尺寸对分类迭代次数和准确率的影响
- 介绍理想工作计算机 英语作文,我的理想工作英语作文(精选5篇)
- 下一代低延时直播CDN:HLS、RTMP 与UDP +WebRTC
- 一个简单易用的导出Excel类
- ionic4 引入外部字体ttf
- 判断图片文件真实类型---通过文件表头判断。
- angulrar知识点整理
- windows7 纯净版各个版本下载
- 网状meta分析怎么入门?网状meta分析与meta分析区别
- 二调,分幅图打印(标准分幅土地利用现状图,耕地坡度分级图),图框工具
- wps怎么做文档分享
- please select a vaild python interpret
- 开发APP的java工具_程序猿必备的java的app开发工具有哪些
- 基于ROS设计一款机械臂控制系统 [转发]
- 【Excel】之数据透视表及动态图表
- vue基础:ElementUI的表单
- R语言用LOESS(局部加权回归)季节趋势分解(STL)进行时间序列异常检测
- 综合架构-高可用服务
- 车联网各领域头部企业排行榜
热门文章
- linux内核api作用,内存管理 – Linux内核API get_unmapped_area
- HDOJ 5143 NPY and arithmetic progression DFS
- IPV4内网地址网段
- Java爬坑--集合(二)List
- Where子句常用查询条件
- 卡方检验四格表怎么做_运用SPSS进行医学诊断数据的Kappa一致性检验 ——【杏花开医学统计】...
- 阿里云在安全方面有哪些防护措施
- 进制转换和2的幂次方表示
- 配色三部曲-你真懂这些色彩术语吗?
- QT软件ICON图标在线制作