文档章节

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

xiaoxin502
 xiaoxin502
发布于 2015/12/08 19:14
字数 377
阅读 3519
收藏 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
浅谈Web自适应

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

数通畅联
2016/08/19
75
0
img与background-image之间的区别

1.img <img src="图片来源" alt="图片无法显示时显示图片说明性文字" style="设置样式属性" /> img标签虽然不是块状元素,但是可以设置宽高,占位, img设置width后height会自适应匹配,如果...

爱喝水的小熊
07/17
0
0
Android官方提供的支持不同屏幕大小的全部方法

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

jdroid
2014/05/02
0
1

没有更多内容

加载失败,请刷新页面

加载更多

精通Spring Boot——第十二篇:分页查询功能的实现

本文将介绍如何实现分页查询功能,推荐使用github的pagehelper插件实现(事实上大家基本都是这么干的),但本文的实现方式和大多数不同,废话少说,现在就带着大家看看区别在哪里。 先看pom...

developlee的潇洒人生
28分钟前
3
0
平淡的秋招之路

1. 概述 在八月中旬之前,我还没有秋招这个概念,认为找工作就是通过学校举办的招聘会。后来慢慢的了解到,由于学校实力的问题,许多好的公司只会去门当户对的学校进行招聘。我们学校只是一个...

firepation
31分钟前
1
0
设置布局中的子控件不可用

RelativeLayout R2 = findViewById(R.id.act_menu_level2_rl); //设置当前R2中的子控件不可用 int childCount = R2.getChildCount(); ......

lanyu96
42分钟前
2
0
分布式系统中处理参数配置的 4 种方案

一个系统中包含有各种各样的配置信息,如一个日志文件需要配置以下几个信息。 日志文件生成主目录 日志文件名称,不同的日志级别对应不同的文件 当前日志级别 还有其他各种业务参数、系统参数...

Java技术栈
44分钟前
3
0
MongoDB的使用学习之(七)MongoDB的聚合查询(两种方式)附项目源码

MongoDB的使用学习之(七)MongoDB的聚合查询(两种方式)附项目源码 先来张在路上…… 铛铛铛……项目源码下载地址:http://files.cnblogs.com/ontheroad_lee/MongoDBDemo.rar 此项目是用M...

Airship
50分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部