博客分类：
目的是：通过background的一系列属性，让DIV按照背景图片的比例缩放，并让背景图片填充整个DIV
首先我们需要让背景图片在指定的DIV中全部填充显示
之前看有用类似 background-attachment: 的fix来实现背景图片的填充，但是，貌似是不能按照当前的DIV大小去填充。
我的情况是，宽度按照整个屏幕的百分比来调整，但是高度，又不能通过整个屏幕的高度百分比来调整，而也想通过宽度的百分比，即宽高比希望与背景图片的宽高比相等。
通过一下属性，先填充
background-size: 100%
background-repeat: no-
background-image: url(../images/aaa.png);
然后通过对这个div的before添加样式
content: "";
display:
padding-top: 100%;
/* 代表1：1，如果是想要5：1就是20%，根据图片大小比例，那就自己算一下吧*/
这块实际上做的就是用before占用一块位置，把相应的高度撑起来～
然后里面就可以放任何东西了，当然，里面的东西要保持
position:
&&& top: 0;
&&& left: 0;
&&& bottom: 0;
&&& right: 0;
width:100%;
height:100%;
同时，上一层的position要是relative的，这样就可以保证，里面的内容刚刚好在背景图片这个区域了
浏览 49211
浏览: 620704 次
来自: 大连
最近了解到一款StratoIO打印控件，功能如下：1、Html ...
不错不错，试了，是可以的
我遇到这个问题了！我的原因是配置文件里写得各个包的xsd文件的 ...
我只想知道，你最后配置成功了吗？我这里怎么tomcat总是死呢 ...
jun23100 写道我也遇到这个问题了，环境都是正确的，怎么 ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'HTML中通过CSS设置背景图片自适应浏览器大小
我的图书馆
HTML中通过CSS设置背景图片自适应浏览器大小
抬头语：须合理利用互联网资源，只抄袭却不做深入思考，使读者误入歧途的假博主都是贱逼！123&div&id="formbackground"&style="position:&width:100%;&height:100%;&z-index:-1"&&&&img&src="pictures/background.jpg"&height="100%"&width="100%"/&&&&/div&这个上面是通用的写法意思就是在你想设置背景的DIV中，添加以上代码，把这个DIV设置为底层，你的其他内容会浮在这个DIV上面，修改你的img src路径就可以了。但是对于很多浏览器来讲还是有问题，因为它预知你的浏览器是一个，如果用户接了个扩展显示器，就是有2个或者3个显示器，怎么搞？这特么的肯定不对啊，height="100%"这个是根据你的屏幕分辨率来的，不是你的浏览器的大小所以我们要引入JS，最简单的就是用jquery了调整为如下代码：1234567&div&id="formbackground"&style="position:&z-index:-1;"&&img&src="10.jpg"&height="100%"&width="100%"/&&/div&&script&type="text/javascript"&$(function(){&&&&$('#formbackground').height($(window).height());&&&&$('#formbackground').width($(window).width());});&/script&上面这个才对不用谢，请叫我雷锋本文禁止转载!
喜欢该文的人也喜欢andorid最新的不规则色彩背景图片自适应屏幕宽高,背景不变形
先在这里吐槽一下万恶的客户改需求...
再说一句...网上大部份资料都是坑爹的.因为不是针对你需求来写的....别照抄..你只能从多种答案中总结出自己的代码.自己的方法
所谓不规则背景图片是指色彩不同统.不是图形不规则. ----如户外照片
在安卓中.为了尽量避免布局问题.我们一般都是尽量使用统一色调或有一定变色规律的图片作为背景.因为这样易处理. 用.9图
但遇到一般变态的需求..那就实在没办法了.下面进入主题
一般要做自适应的背景. 尽量做单色或有规则的图.这样可以用.9图来无限拉伸,还不变形.
什么是.9图..做安卓的一定要用.请百度draw9patch的用法
安卓有各种不同屏幕不同像素不同密度的手机.如果一个应用面向广,那必定要做到各种机型匹配.
这里对什么像素什么密度这个坑爹的东西就不说了.说了我也懂,你也不懂.
要做到绝大部份机型屏幕匹配.有三步必不可少
第一, 做多套图,不是所有的activity都做多套图.主要是针对哪个activity加载过那些坑爹的不规则图的来做
hdpi(480*800)--ldpi(320*480)--mdpi(240*320)--xhdpi(720*1280)四个文件夹各一套(文件命名相同)...别想偷懒了.项目经理会叼死你的
第二 针对多套图,做多套布局
图片问题解决了,接下来到布局.别以为解决图片就完事了. 因为如果你布局中有写死的高或宽度..屏幕(分辩率)的大小也会影响到布局的...
针对各套图对一个布局(文件命名相同)放在不同的文件夹中. 文件夹的命名有点要注意.在res下新建一个名为layout-800x480的文件夹放针对hdpi图的.依以类推..就得800在前面.要不报错...
第三用bitmap.createBitmap()方法对图片进行切割.以便适应应用程序的宽高(不是屏幕的宽高喔..如果不是满屏的,还有那该死的通知栏高度要减去的)
当你欢天喜地地做完第一第二步就去设背景图时.若你细心.如果你直接用480*800的图作背景时..TMD还是会被压扁了..为什么.网上的人都说直接切480的高就可以自动适应的.为什么..我告诉你. 网上的大部份都是坑爹的答案..要么是copy.要么是装大神不实践单看API就回答你的.
480*800是的800是啥.屏幕高度..你应用是全屏显示的么.不是吧. 那就得在这个800上减去通知栏的高度啊..这个才是你应用程序的高度.
可能你会说. 那我直接叫美工切图时不切够800就行啦.减去通知栏高度切..你肯定所有手机的通知栏高度是一样的么?平板呢?非主流改通知栏高度呢? 坑死你...我就是这样被坑死的.
那么我们就要在代码中动态获取通知栏高度.减去..从面得到真正的应用程序高度A..这里暂时叫A.假设它是750高的.
你的图是800..实度背景高是750.那你的图肯定被压扁啦..怎么办呢.到这里.我只想到了一个折中的办法.
就是把 屏幕不能显示的那一部份图切割掉(我切的是图片底部)...这个是没办法的办法..将损失减到最少.
宽度让它去自适用..多出来的高度切换. 同理.如果是宽度多出来的话.就把宽度切掉,
因为Bitmap.createBitmap方法是把一个位图.从什么位置开始切到什么位置的. 这里你可以根据需要去慢慢灵活运用.
下面贴出它的代码.
至于还有一些坑爹的768*1280的这些屏幕. 同样可以用切割去处理..
下面代码中.XML代码就是一相对布局.里面没有任何东西.相对布局的宽度是父窗口自适应
public class MainActivity extends Activity {
@SuppressLint("NewApi")
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
a = (RelativeLayout)findViewById(R.id.a);
//通知栏高度
int i = getStatusBarHeight(this);
Bitmap bm = BitmapFactory.decodeResource(getResources(), R.drawable.main_bg);
DisplayMetrics metric = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metric);
int width = metric.widthP
// 屏幕宽度（像素）
int height = metric.heightP
// 屏幕高度（像素）
System.out.println(height);
Bitmap bm1 = bm.createBitmap(bm, 0, 0, width, height-i);
Drawable bd = new BitmapDrawable(getResources(), bm1);
a.setBackground(bd);
//获取通知栏高度
public static int getStatusBarHeight(Context context){
Object obj =
Field field =
int x = 0, statusBarHeight = 0;
c = Class.forName("com.android.internal.R$dimen");
obj = c.newInstance();
field = c.getField("status_bar_height");
x = Integer.parseInt(field.get(obj).toString());
statusBarHeight = context.getResources().getDimensionPixelSize(x);
} catch (Exception e1) {
e1.printStackTrace();
return statusBarH由于显示器分辨率的不同，相同的背景图片在不同分辨率下有可能会出现只显示一部分或留部分空白的情况。
实现效果：不管你怎么变化窗口大小，背景图始终会自动调节大小。
1 . 第一种：
第一个想法是需要使用一个 css 背景图，如果这张图够大，就能填充整个屏幕。当浏览器窗口大小没有图片大时，它将自动隐藏多余的部分。
&&....&&type=&text/javascript&&src=&js/jquery.js&&&type=&text/javascript&&$(document).ready(function()&{&$(&img.source-image&).hide();&var&$source&=&$(&img.source-image&).attr(&src&);&$('#page-body').css({&'backgroundImage':&'url('&+&$source&+')',&'backgroundRepeat':&'no-repeat',&'backgroundPosition':&'top&center'&});&});&&&&id=&page-body&&&class=&source-image&&src=&images/image.jpg&&alt=&&&&&
上面的这些代码能够自动隐藏超出浏览器窗口部分的图片(image.jpg)多余部分，不会使浏览器产生滚动条。
2 . 第二种：
第一次试验的效果并没有达到要求，并不是真的使得背景图片适应窗口大小，应该使用设置&宽度&和&高度&属性来控制图片的大小，如果我们能够得到浏览器窗口显示像素，就可以利用这个数字来控制图片大小，同时保持比例。
使用 jquery 和 dimensions plugin 可以获得这些参数。
&type=&text/javascript&&src=&/js/jquery.js&&&type=&text/javascript&&src=&/js/jquery.dimensions.js&&&type=&text/javascript&&$(document).ready(function()&{&var&$winwidth&=&$(window).width();&$(&img.source-image&).attr({&width:&$winwidth&});&$(window).bind(&resize&,&function(){&var&$winwidth&=&$(window).width();&$(&img.source-image&).attr({&width:&$winwidth&});&});&});&&
为了让这张图片更像一个背景图像，我们设置：
img.source-image&{position:&absolute;top:&0;left:&0;}&
因为背景图片加上了定位代码，那要加在背景图片上任何东西都需要定位，如果您的背景图像是竖条状的（特别的高），而你的浏览窗口特别的宽，很容易造成背景图片高度超过您的浏览器窗口的高度，为了防止这种情况，需要设定对超出的部分进行隐藏：
body&{overflow:&hidden;}&
3 . 第三次方法（最好的）：
Stu Nicholls version给出了最好的方法(看了下网易的首页也是这样做的)，这处理方式不需要任何的 JavaScript 就能完美的达到目的。
#img.source-image&{width:&100%;position:&top:&0;left:&0;}&
在 css 里直接设定背景图片宽度的百分比，这是这个方法的效果。这个方法是最好的，而且不需要任何的 JavaScript 。
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）多种方法使背景图片占据整个屏幕
& 发布时间： 11:45:59 & 作者：佚名 &
使背景图片占据整个屏幕的方法有很多：CSS处理、把背景图片做的足够大、用Js/jQuery控制大小、利用img元素自适应，详细请了解本文
一直在关注这个问题（其实是因为压根就是初学者..... 就现在了解有几种方法： ①CSS处理方法（仅IE） 代码如下: #backGroundImg { background-image: url("X.png"); background-repeat: no- filter:progid:dximagetransform.microsoft.alphaimageloader(src='X.png', sizingmethod='scale');/*加上这个，详细可Google*/ } ②把背景图片做的足够大； 一般情况下，我们设计给我的图都是的极限，然后居中显示就会适应大部分的屏幕了。可是现在显示器越来越大，加上Mac下Retina屏超高分辨率的虐待...当分辨率超过背景图大小时，边上就会变成背景色了。 所以最直观的方法就是将背景图的大小，翻倍，翻倍，再翻倍....只要超过主流浏览器最大分辨率就好了。 不过弊端很明显，过大的图片会极大的影响网页的加载速度。 ③用Js/jQuery控制大小（这其实是种假象的背景自适应） 利用加入个&img&标签，将z-index设置的低一些，然后用Js/jQuery监视窗口大小，然后改变图片的长宽就好了。（详细Google） 不过，这种方法，当图片被拉伸或压缩的过于严重的时候会非常可怕的..... 而且，如果屏蔽右键功能会很蛋疼；不屏蔽右键功能就露怯了。 ④利用&img&元素自适应。 这个其实和③差不多，如果是整个网页的背景，在起始&body&后马上加上&img&然后将CSS设置 width:100%; height:100%; 这样，图片就会随着浏览器的放大缩小自动缩放了。弊端也和③差不多。
大家感兴趣的内容
12345678910
最近更新的内容