文档章节

css 背景图不拉伸自适应屏幕大小

xiaoxin502
 xiaoxin502
发布于 2015/12/08 19:14
字数 377
阅读 3651
收藏 1

效果图

全屏:

背景图尺寸大于屏幕尺寸,背景图只显示跟屏幕一样大小内容

小屏时:

如效果图所示,图片并没有发生压缩、或者缩小比例,它只是显示跟屏幕尺寸大小的内容,至于如何控制缩小浏览器时图片的变化,可以使用css的

background-position:

属性来进行控制,它的部分可选参数值如下:

详细参数可自行查看api文档。

下面贴上代码

主要html代码:

<body>
        <div style="
             background: url('img/failure.jpg') no-repeat center center;
             width: 100%;
             height: 100%;
             position: fixed;
">
        </div>
</body>

使用position:fixed之后就可以通过设置width和height来控制div的宽高度了。

background: url('img/failure.jpg') no-repeat center center;
后面的no-repeat 表明图片文件不重复平铺,后面的center center表示当屏幕缩小时,图片在水平方向和垂直方向都居中显示。

页面的其他内容就可以全部都写在上面的div中了,不过这代码有些问题,因为最外层div已经使用了fix定位,已经脱离了文档流,如果有其他元素使用相对定位或者绝对定位会不会受到影响,我还没测试到。如果有更好的方法可以实现图片自适应屏幕的功能,请大家多多指教。




© 著作权归作者所有

共有 人打赏支持
xiaoxin502
粉丝 0
博文 4
码字总数 1730
作品 0
广州
私信 提问
CSS3 border-image详解、应用及jQuery插件

一、border-image的兼容性 border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊人。可惜目前支持的浏览器有限,仅 Firefox3.5,chrome浏览器,Safari3+支持...

林文安
2012/05/31
0
0
Android .9.png 的介绍

概述 .9.PNG是安卓开发里面的一种特殊的图片,这种格式的图片通过ADT自带的编辑工具生成,使用九宫格切分的方法。点九图是一种可拉伸的位图,android会自动调整它的大小,来使图像在充当背景...

xi阳
09/14
0
0
Android官方提供的支持不同屏幕大小的全部方法

本文将告诉你如何让你的应用程序支持各种不同屏幕大小,主要通过以下几种办法: 让你的布局能充分的自适应屏幕 根据屏幕的配置来加载合适的UI布局 确保正确的布局应用在正确的设备屏幕上 提供...

jdroid
2014/05/02
0
1
.9.png图片的生成和使用

开发应用程序的时候,如果一个应用的界面太丑,给用户的第一感觉就是这个产品很垃圾,即使功能很强悍。大公司的码农当然就不用担心了,因为有很多艺 术天赋的美工美眉来处理这个方面,但是如...

海阔天空玩世不恭
2016/08/22
162
0
浅谈Web自适应

前言 随着移动设备的普及,移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁,手机厂商繁多,导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在编写前端...

数通畅联
2016/08/19
75
0

没有更多内容

加载失败,请刷新页面

加载更多

详解如何实现一个简单的 vuex

首先我们需要知道为何要使用 vuex。父子组件通信用 prop 和自定义事件可以搞定,简单的非父子组件通信用 bus(一个空的 Vue 实例)。那么使用 vuex 就是为了解决复杂的非父子组件通信。 仅仅...

嫣然丫丫丫
15分钟前
0
0
算法——RangePartitioner实现之reservoirSample

简介 reservoir的作用是:**在不知道文件总行数的情况下,如何从文件中随机的抽取一行?**即是说如果最后发现文字档共有N行,则每一行被抽取的概率均为1/N? 我们可以:定义取出的行号为cho...

freeli
17分钟前
0
0
Python安装及netcdf数据读写

一、在CentOS7系统上安装Python3 在anaconda官网下载(http://https://www.anaconda.com/download/#linux)(Anaconda指的是一个开源的Python发行版本,是Python的包管理器和环境管理器) 下...

voole
21分钟前
0
0
基于NEO的私链(Private Blockchain)

1.准备工作 1.NEO-GUI 2.NEO-CLI 3..NET Core Runtime (不能是2.x版本,官方建议是1.12,实际上我用1.14也是没有问题的) 4.四台windows操作系统的虚拟机(本文是基于AWS的,理论上本地跑虚...

NEO-FANS
28分钟前
0
0
linux中shell if 判断总结

UNIX Shell 里面比较字符写法 -eq 等于; -ne 不等于; -gt 大于; -lt 小于 ; -le 小于等于; -ge 大于等于; -z 空串; -n 非空串; = 两个字符相等; != 两个字符不等 无论什么编程语言都离不开条...

linuxprobe16
43分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部