文档章节

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

xiaoxin502
 xiaoxin502
发布于 2015/12/08 19:14
字数 377
阅读 3322
收藏 1
点赞 0
评论 0

效果图

全屏:

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

小屏时:

如效果图所示,图片并没有发生压缩、或者缩小比例,它只是显示跟屏幕尺寸大小的内容,至于如何控制缩小浏览器时图片的变化,可以使用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
广州
浅谈Web自适应

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

数通畅联 ⋅ 2016/08/19 ⋅ 0

CSS3 border-image详解、应用及jQuery插件

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

林文安 ⋅ 2012/05/31 ⋅ 0

Android官方提供的支持不同屏幕大小的全部方法

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

jdroid ⋅ 2014/05/02 ⋅ 1

HTML5 背景图片自适应屏幕的大小

在日常的开放中,经常会遇到有背景图片的时候,现在不同屏幕大小的手机又很多,如何让背景图片自适应屏幕的大小了。 在网上搜了很多方法,有的还不一定的能解决问题。如下办法,是我经常使用...

突然很想飞 ⋅ 2015/12/10 ⋅ 0

制作android自适应屏幕大小的图片

常用的Drawable Resources主要有以下几种: 1、Bitmap File,一种位图(png或 jpg或 gif) 2、Nine-Patch File,一种可拉伸的自适应的png图片,以(9.png)为后缀名。 3、State List,一种以XML...

鉴客 ⋅ 2011/12/21 ⋅ 0

.9.png图片的生成和使用

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

海阔天空玩世不恭 ⋅ 2016/08/22 ⋅ 0

布局方式 - 前端进阶之路

页面布局的方式总是随着技术的更新和创意的涌现不断的更新换代。从最开始的 固定布局「Fixed」到因为宽屏设备和移动互联网的普及产生的响应式和自适应,再到「Mobile First」的设计理念,前端...

果汁凉茶丶 ⋅ 01/07 ⋅ 0

draw9patch超详细教程

1.背景自适应且不失真问题的存在 制作自适应背景图片是UI开发的一个广泛问题,也是界面设计师渴望解决的问题,我相信我们彼此都深有体会。 比如,列表的背景图一定,但是列表的高度随着列表数...

娶到笨笨 ⋅ 2014/06/09 ⋅ 0

App自适应draw9patch不失真背景

做人要大度,海纳百川,做事要圆滑,左右逢源,这让我想到了编程也是如此,代码要扩展,界面也要考虑自适应。 这篇文章是android开发人员的必备知识,是我特别为大家整理和总结的,不求完美,...

鉴客 ⋅ 2011/11/14 ⋅ 0

react-native 之布局篇

宽度单位和像素密度 react的宽度不支持百分比,设置宽度时不需要带单位 , 那么10代表的具体宽度是多少呢? 不知道是官网文档不全还是我眼瞎,反正是没找到,那做一个实验自己找吧: var Di...

Jack088 ⋅ 2016/01/06 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

vim编辑模式、命令模式

编辑模式 vim要从一般模式进入编辑模式只要按字母 i 、I、a、A、o、O键就可以了 要从编辑模式回到一般模式按键盘上的Esc键即可。 按键 作用 i 在当前字符前插入 I 在光标所在行的行首插入 o ...

黄昏残影 ⋅ 28分钟前 ⋅ 0

OSChina 周五乱弹 —— 如果有一天不当程序员了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @guanglun :分享off的单曲《我唱情歌给你听》 《我唱情歌给你听》- off 手机党少年们想听歌,请使劲儿戳(这里) @小小编辑 :#如果不做程序...

小小编辑 ⋅ 35分钟前 ⋅ 5

从 Confluence 5.3 及其早期版本中恢复空间

如果你需要从 Confluence 5.3 及其早期版本中的导出文件恢复到晚于 Confluence 5.3 的 Confluence 中的话。你可以使用临时的 Confluence 空间安装,然后将这个 Confluence 安装实例升级到你现...

honeymose ⋅ 今天 ⋅ 0

Java8新增的DateTimeFormatter与SimpleDateFormat的区别

两者最大的区别是,Java8的DateTimeFormatter也是线程安全的,而SimpleDateFormat并不是线程安全。 在并发环境下使用SimpleDateFormat 为了能够在多线程环境下使用SimpleDateFormat,有这三种...

人觉非常君 ⋅ 今天 ⋅ 0

多线程如何控制执行顺序

线程的生命周期说明: 当线程被创建并启动以后,它既不是一启动就进入了执行状态,也不是一直处于执行状态,在线程的生命周期中,它要经过新建(New)、就绪(Runnable)、运行(Running)、...

MarinJ_Shao ⋅ 今天 ⋅ 0

用ZBLOG2.3博客写读书笔记网站能创造今日头条的辉煌吗?

最近两年,著名的自媒体网站今日头条可以说是火得一塌糊涂,虽然从目前来看也遇到了一点瓶颈,毕竟发展到了一定的规模,继续增长就更加难了,但如今的今日头条规模和流量已经非常大了。 我们...

原创小博客 ⋅ 今天 ⋅ 0

MyBatis四大核心概念

本文讲解 MyBatis 四大核心概念(SqlSessionFactoryBuilder、SqlSessionFactory、SqlSession、Mapper)。 MyBatis 作为互联网数据库映射工具界的“上古神器”,训有四大“神兽”,谓之:Sql...

waylau ⋅ 今天 ⋅ 0

以太坊java开发包web3j简介

web3j(org.web3j)是Java版本的以太坊JSON RPC接口协议封装实现,如果需要将你的Java应用或安卓应用接入以太坊,或者希望用java开发一个钱包应用,那么用web3j就对了。 web3j的功能相当完整...

汇智网教程 ⋅ 今天 ⋅ 0

2个线程交替打印100以内的数字

重点提示: 线程的本质上只是一个壳子,真正的逻辑其实在“竞态条件”中。 举个例子,比如本题中的打印,那么在竞态条件中,我只需要一个方法即可; 假如我的需求是2个线程,一个+1,一个-1,...

Germmy ⋅ 今天 ⋅ 0

Django第一期

安装Django 去https://www.djangoproject.com/download/ 下载最新版的Django,然后解压放到Anaconda\Lib\site-packages目录下,然后cmd进入此目录,输入安装命令: python setup.py install ...

大不了敲一辈子代码 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部