css如何解决背景图片分辨率问题

‘壹’ css 如何让图片全屏的问题

1:一个很小的条状图，通过repeat后，形成一个很规则的大图背景。 但是css3出现以后，这个情况被改善了。background-size 属性可以让我们之前的希望成真。而且这个属性在firefox，chrome，以及ie9上都可以使用。

2:背景图尺寸（数值表示方式）代码如下:#background-size{ background-size:200px 100px; }

3:背景图尺寸（百分比表示方式） 代码如下:#background-size2{ background-size:30% 60%; }

4:背景图尺寸（等比扩展图片来填满元素，即cover值）代码如下:#background-size3{ background-size:cover; }

5:背景图尺寸（等比缩小图片来适应元素的尺寸，即contain值） 代码如下:#background-size4{ background-size:contain; }

6:背景图尺寸（以图片自身大小来填充元素，即auto值）代码如下:#background-size5{ background-size:auto; }

(1)css如何解决背景图片分辨率问题扩展阅读:

1:CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素。

2:样式通常存储在样式表中，把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题。

3:外部样式表可以极大提高工作效率，外部样式表通常存储在 CSS 文件中。

4:css设置背景图片全屏，如果只是将其当做一张图片显示，可以通过css控制。超大图片，引入进来即可根据大小缩放。

5:如果这张图片为背景图片由于背景图片不具有伸缩性，只能通过别的方法绕着解决，在ie中可以用，实现背景拉伸铺满整个浏览器，但其它的浏览器不支持。

‘贰’ css 如何固定网页背景，并且随浏览器的像素大小而变！

css3可以做到兼容ie9和市面上的多数非IE内核浏览器，它的

background-size可以设置2个值，1个为必填，1个为可选。

其中第1个值用于指定背景图的width，第2个值用于指定背景图的height，如果只给background-size设置1个值，则第2个值默认为auto（cover和contain特定值除外）。

div{

background-image:url(test.png);

background-repeat:no-repeat;

background-size:100px;

}

cover表示覆盖整个容器。你要背景全部那么需要注意的是html,body {height:100%}

当然以上内容不兼容低版本IE浏览器和不兼容css3规则的浏览器。

你说的背景整张显示，我之前项目遇到过这样的需求。我是直接用脚本写的。

实现思路是用图片绝对定位在网站最底层，z-index属性设置成负值。用脚本判断窗口大小，在每次窗口大小发生改变时监听事件捕获长宽，赋值给这张“地图”。

‘叁’ css中如何调整插入背景图片的大小

可以通过cover和contain来对图片进行伸缩。

语法：

background-size:auto;/* 默认值，不改变背景图片的高度和宽度 */

background-size:100px 50px;/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */

background-size:10%;/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */

background-size:cover;/* 将背景图片等比缩放填满整个容器 */

background-size:contain;/* 将背景图片等比缩放至某一边紧贴容器边缘 */

(3)css如何解决背景图片分辨率问题扩展阅读：

CSS背景图片自适应、全屏、填充、拉伸

方法一：js控制

<div id="formbackground" style="position:absolute; width:100%; height:100%; z-index:-1">

<img src="pictures/background.jpg" height="100%" width="100%"/>

</div>

<div id="formbackground" style="position:absolute; 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>

方法二：全浏览器兼容

.bg{

background:url(http://wyz.67ge.com/wp-content/uploads/qzlogo.jpg);

filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";

-moz-background-size:100% 100%;

background-size:100% 100%;

}

‘肆’ 如何设置CSS网页中的背景图片不让其重复并且铺满整个屏幕，不会因为分辨率的问题而显示不出来

background-repeat: no-repeat; /* 不平铺 */

然后是铺满容器的问题，如果忽略IE内核的浏览器，用css3属性background-size: 100%;轻松解决，要兼容的话可以设一个背景层放在容器的下方，背景层里面放你的背景图片，宽高设为跟容器一样，然后把容器的背景设为透明即可。