html背景图片纵向拉伸,背景图片拉伸（CSS方法）_html/css

在布局现在的网站首页的时候，发现一个问题。我使用了一张1440*900的png图片作为背景图片。页面内的Div使用了较多的百分比自适应框体大小，原body元素的CSS如下

html { width: 100%; height: 100%;}body { background: url(../img/bg.png) no-repeat; margin: 0; padding: 0; width: 100%; height: 100%; overflow: auto;}

背景图片为一张渐变图片，如果图片重复平铺的话将会非常难看，所以不做平铺处理。

这样完成后在不超过1440*900的分辨率的显示器下都没有问题，可是当用更高的分辨率的显示器查看时，发现，框体随着浏览器的大小拉伸了，可是背景图片当超过1440*900以后就会用白色背景补缺，十分难看。

后来去查找处理方法，找到一些用js处理(由于鄙人Js还在学习，未采用)，还有一些在某些特定兼容条件下用CSS处理的。

于是，就采用以下方式重新进行背景。

HTML部分代码：

CSS部分代码：

html { width: 100%; height: 100%;}body { /*background: url(../img/bg.png) no-repeat;*/ margin: 0; padding: 0; width: 100%; height: 100%; overflow: auto;}/* ------------ Background Img ------------------*/#background_img { z-index: -999; position: fixed; left: 0; top: 0; width: 100%; height: 100%;}

完成后背景图片(其实已经变成伪背景，是一个在页面的img)会随着浏览器的大小，进行拉伸。

这种方法存在的问题：

①jpg图片，当拉伸到一定程度以后，画质损失会非常严重。

②当在空白区域鼠标右键，显示的是保存图片，而不是常规右键菜单。

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网

html背景图片纵向拉伸,背景图片拉伸（CSS方法）_html/css_WEB-ITnose相关推荐

html+css学习第六天（背景图片、精灵图片、元素内容溢出、长度单位）
一.背景图片背景图片默认显示的是图片的原始尺寸,如果背景图片大于元素尺寸,则只能显示图片的一部分(左上角). 1.background-image: 设置元素的背景图片. url("图片路 ...
html 图片纵向拉伸,css如何让图片拉伸？
css设置图片拉伸的方法:1.使用width与height属性强制设置图片大小使图片拉伸.2.使用background-size属性拉伸背景图片. 1.强行设定大小值会导致拉伸示例://html . ...
CSS盒圆角、阴影、边界图片、背景
CSS 圆角通过 CSS border-radius 属性,可以实现任何元素的"圆角"样式. 1.border-radius;四个值的时候 .div-1{width: 100px ...
CSS background 之设置图片为背景技巧
首先先来看看background有那些值: 可以按顺序设置如下属性(可点击进入相应的css手册查看使用): background-color 背景颜色 background-image 背景图片 ba ...
设置背景图时防止图片拉伸的解决方法
在设置背景图时,如果图片不够大会被拉伸,使图片失真,如果图片太大会对view控件的显示造成影响. 如果只是在ImageView中设置图片的话,在程式中可以利用setScaleType进行动态设定,在x ...
html背景图片只显示一张图片,img只显示图片一部分或 css设置背景图片只显示图片指定区域(示例代码)...
17:14 2016/3/22 img只显示图片一部分或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...
html radio 默认图片替换_用纯CSS改变html radio/checkbox默认背景颜色样式
checkbox/ radoi默认不支持更改背景颜色,这里可以使用伪类来实现.基本原理是利用after/ before插入新的元素.然后利用新元素的背景颜色或背景图片覆盖掉原来的样式. CSS代码: ...
CSS常用背景属性（背景颜色、背景图片、背景平铺、背景位置、背景附着、背景色半透明、背景属性复合写法）
本博文记录CSS中比较常用的背景属性,包括背景颜色:background-color.背景图片:background-image.背景平铺:background-repeat.背景位置:backgro ...
怎么修改背景图片大小的HTML代码,css如何改变背景图片大小？
我们现在经常会用到CSS,在编写过程中,会遇到CSS背景图像大小设置的问题.那么css如何改变背景图片大小?下面本篇文章就来给大家介绍一下,希望对大家有所帮助. 在CSS中,想要改变背景图片的大小,可 ...

html背景图片纵向拉伸,背景图片拉伸（CSS方法）_html/css_WEB-ITnose

html背景图片纵向拉伸,背景图片拉伸（CSS方法）_html/css_WEB-ITnose相关推荐

最新文章

热门文章

html背景图片 纵向拉伸,背景图片拉伸（CSS方法）_html/css_WEB-ITnose

html背景图片 纵向拉伸,背景图片拉伸（CSS方法）_html/css_WEB-ITnose相关推荐

最新文章

热门文章

html背景图片纵向拉伸,背景图片拉伸（CSS方法）_html/css_WEB-ITnose

html背景图片纵向拉伸,背景图片拉伸（CSS方法）_html/css_WEB-ITnose相关推荐