css的background属性,背景图片太大无法适应屏幕显示

psd文档
用于bg的图片
浏览器打开后
在练习仅用html+css布局时,裁剪下的图片像素太高,css设置了width:100% auto;
background: url("images/header.gif") no-repeat;浏览器显示的结果如图。
问:请问各位前辈怎样才能设置图片的大小适应屏幕呢,除了css3的background-size:100%.

5个回答

试一下这个

<style type="text/css">
    body{
        margin: 0;
        padding: 0;
    }
    #bg_img{
        width: 100%;
        height: 100%;
        position: fixed;
    }
    </style>
    <body>
        <img src="1.jpg" id="bg_img"/>

    </body>  
qq_29594393
当作看不见 回复Hikari10086: 条件太苛刻了,臣妾做不到啊,所有的方法的都试过了,还特意去看了一下,background的属性
大约 3 年之前 回复
Hikari10086
十进制Hikari 最上面的,目的是用background添加bg图片,background: url("images/header.gif") no-repeat;
大约 3 年之前 回复

用jquery控制图片大小
虽然很low ,但是能实现效果

  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $("#bg_img").css({
                "height":window.innerHeight+"px",
                "width":window.innerWidth+"px"
            })
        $(window).resize(function(){
            $("#bg_img").css({
                "height":window.innerHeight+"px",
                "width":window.innerWidth+"px"
            })
        })  
    })
    </script>
    </head>  
    <style type="text/css">
    #bg_img{
        position: fixed;
        top: 0;
        left: 0;
    }
    </style>
    <body>
        <img src="1.jpg" id="bg_img"/>

    </body>  
Hikari10086
十进制Hikari 谢谢,不过上面有说【仅用html+css布局】的情况,主要考虑用css怎么写,而且不用background-size
大约 3 年之前 回复

你只考虑用div 不考虑用img吗

waterhexuan
编天码地 回复十进制Hikari: 有些事情真的就是不可能的
大约 3 年之前 回复
Hikari10086
十进制Hikari
大约 3 年之前 回复

可以在IMG里调整图片大小

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
CSS background(背景图片)详解
“在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片。那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。” css怎样设置背景图片? css background属性就是专门设置背景的属性,可以设置背景色,也可以设置背景图片。 background-image:url() 引入背景图...
css background属性问题
请问css background属性设transparent有什么作用?详细点,谢谢!
css background:属性问题
background: url(Plus.png) no-repeat scroll 90% 90% / auto 90%;这个斜杠后面是什么意思rn斜杠前面的90% 90%又是什么意思呢rnrnrnrn是background-size吗?
css——background背景属性
设置背景颜色——:background-color 设置背景图——:background-image{ URL:xxxx}(必须设置一个url链接到相应图片才行) 设置背景重复——:background-repeat:{ repeat-y/repeat-x/no-repeat}(这样的重复能让尺寸很小的背景,也能填充满大的body) 设置背景定位——:background-position{c
CSS 背景属性(Background)
背景 1、背景颜色 2、背景图片 平铺 background-repeat: no-repeat repeat-x repeat-y 位置 background-position: x值 y值; right center bottom(y) left top(y) 正值 负值 选择照片特定的图像 3、滚动 background-at...
CSS之定位,background属性
定位关于定位 我们可以使用css的position属性来设置元素的定位类型,postion的设置项如下:relative 生成相对定位元素,元素所占据的文档流的位置不变,元素本身相对文档流的位置进行偏移absolute 生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位,如果找不到,则相对于body元素...
CSS——background系列属性
关于颜色 1. 能够用英语单词来表述的颜色都是简单的颜色 2. 用rgb方法来表示: 光学显示器每个像素都是由三原色的发光原件组成的,靠明亮度不同调成不同颜色。 用逗号隔开, r, g, b的值,每个值的取值范围0~255,一共256个值。 如果此项值是255,就说明是纯色。
css 背景颜色 background属性
背景颜色 background含义:背景是指在盒子结构中,衬托在边框线范围以内的背景颜色或背景图。可以设置背景颜色,或背景图,或同时设置。其中背景图有多项参数可设置。主要的背景属性设置有:设置背景颜色:background-color:yellow;设置背景图:background-image:url(图片路径); //注意,图片路径是相对于当前网页或css文件(对外部样式来说)设置背景图...
CSS基础-background的那些属性
background的那些属性 background:背景的意思常用的六个属性 1.background-color:背景颜色 2.background-image:背景图像 3.background-position:图片位置 4.background-repeat:图片是否重复 5.background-attachment:图片定位...
CSS定位,background属性:(四)
还是要说一下,我不是主要学习前端的,但是要掌握一定的前端知识,所以总结的属性肯定不全面,都是比较常用 ,如果我能把我总结的知识点完全掌握了,那就已经满足我的需要了。(害怕一些专业前端人士对我进行吐槽。。。) 1:CSS基本语法及页面引用 2:CSS文本设置 3:CSS颜色表示 4:CSS选择器 5:CSS盒子模型 6:CSS元素溢出 7:CSS块元素、内联元素、内联块元素...
浅谈CSS background参数 属性。
CSS1 中 关于background 属性的参数有以下几种:  1. background-color:设置元素的背景色。  2. background-image:url()设置背景图像。  3. background-repeat:    repeat 默认。背景图像将在垂直方向和水平方向重复。    repeat-x 背景图像将在水平方向重复。    repeat-y 背景图像将在垂直方向...
css background属性详细解析
CSS可以控制html中各元素的背景显示,包括背景颜色、背景图片、背景重复、背景定位和背景关联5项。在CSS中,可以通过background属性对这5项统一控制,也可通过这5项对应的属性分别控制。下面我们先了解一下CSS中的这5个属性。 CSS可以为所有元素设置背景色,从body 一直到em 和a 等内联元素。所有背景属性都不能继承。 背景颜色 background-color属...
CSS background 属性及置换元素
规定背景图像的尺寸: div { background:url(img_flwr.gif); background-size:80px 60px; background-repeat:no-repeat; } background 简写属性在一个声明中设置所有的背景属性。 可以设置如下属性: background-color background-image 规定要使用的背景图像 backgro...
CSS中background属性详解
back
CSS background 属性全家桶
Write By Monkeyfly 以下内容均为原创,如需转载请注明出处。 前提 今天在审查元素时,发现这样一串代码: input.btn-upload { top: 0; right: 0; width: 100%; height: 100%; opacity: 0; display: block; background:...
CSS中的background属性探究
首先需要说明一点就是:background单个属性,如:background-color与background简写属性,如:background:url('./01.gif') repeat-x center;相比,background简写属性在较老版本的浏览器中支持性更好,而且代码更少!**************************************************backg
CSS的background属性的缩写顺序
background 简写属性在一个声明中设置所有的背景属性。他有8个属性: background-color background-position background-size background-repeat background-origin background-clip background-attachment background-image 他是一个复合属性:为了可读性,定一...
flash适应屏幕显示
<%rndatetime=year(date())&"年"&month(date())&"月"&day(date())&"日"&" "&WeekdayName(Weekday(Date)) rn%><%WebIsOFF%>rn rn<%'-- 头部开始 --%>rn rn rn rn rn rn rn<%'-- Banner开始 --%>rn[color=#FF0000] rn rn rnrn<%'-- Banner结束 --%>rnrnrnrnrn要把flash部分设置成适应屏幕大小显示,我改成90%之后图片直接没了,求高手指点,最好全部代码
CSS 背景图片填充属性
如何控制背景图片平铺的方式 在css中有一个background-repeat属性 就是专门控制背景图片平铺的方式 repeat 默认水平和垂直都需要平铺 no-repeat 在水平和垂直都不需要平铺 repeat-x 只在水平方向平铺 repeat-y只在垂直方向平铺...
css的背景及背景图片的属性
css背景图片的属性简介
css 背景图片相关属性
img{ border: 22px solid red; height: 300px; width: 300px; background:url(../images/cbd.jpg) no-repeat; padding: 50px; /* 保证背景图片最大化的在盒子中等比例显示,但不保证能铺满盒子*/ /*background-size:
css背景图片属性
设置背景图片 background-repeat:              1.repeat(默认):背景图片在纵向和横向上平铺。              2.no-repeat:背景图片不平铺。              3.repeat-x:背景图片在横向上平铺。              4.repeat-y:背景图片在纵向上平铺。 背景图片位置 background-positi...
web 背景图片属性background和文本颜色属性text
1.通过&amp;lt;body&amp;gt;元素中的background 属性来设定网页的背景图片。 语法格式如下: &amp;lt;body background=&quot;URL&quot;&amp;gt; background 属性的取值为URL地址,是可以从互联网上得到的资源的位置和访问方法的一种简洁表示,是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL。 因此,可以通过background 属性值指定的UR...
CSS 控制背景图片自动适应宽度和高度
&amp;lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&amp;gt;&amp;lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&amp;gt;&amp;lt;head&amp;gt;&amp;lt;meta h
CSS 背景图片适应分辨率全屏居中
bak{ position: relative; overflow: hidden; width: 1920px; height: 876px; line-height: normal; margin-left: 50%; left: -960px; background-attachment: scroll; background-color: #FFFFFF; background-image...
background设置背景图片巧用
艺龙首页中有一个组件 鼠标移至图片会有撑开效果,而且图片中心位置不会变,这就是backgroun的妙用了 background: url(&amp;amp;quot;&amp;amp;quot;) no-repeat center 0; 意思是图像地址不重复,水平位置居中 垂直位置0。 ...
Android background背景图片平铺
说明: 有一个小图片,然后实现图片背景平铺,这样会就会像html的css一样方便使用了。 方法一: 首先:在res/drawable中创建一个xml文件(background_repeat.xml) <bitmap xmlns:android="http://schemas.android.com/apk/res/android" android:src="@
background属性
国内首套将HTML与CSS整合,以应用场景划分课程模块的前端入门课程。近两百个视频课程,上百张制作精美的PPT,几十张课程内容分析图,以及课程代码等资料。让你全面、系统地学习HTML与CSS制作静态网站技能。
css 背景图片自适应属性整理
本篇博客主要记录一些使用 css 对背景图片自适应的操作整合 背景图片取消重复 background-image: url(image.jpg); background-repeat:no-repeat; 修改前 修改后 背景图片固定(不会随着内容滚动而改变位置) background-image: url(image.jpg); background-attachment:fixed; ...
CSS学习笔记13:background系列属性
一、background-color属性background-color指的是背景颜色属性。在css2.1中,颜色的表示方法共有三种:英语单词、rgb表示法、十六进制表示法。1.英语单词表示法基本语法:background-color:red;2.rgb表示法rgb表示三原色“红”red、“绿”green、“蓝”blue。光学显示器,每个像素都是由三原色的发光原件组成的,靠明亮度不同调成不同的颜色的
关于CSS中background属性的连写格式
background: color url() repeat attachment position;                  颜色  地址 平铺效果 滚动 位置
CSS基础(五)--行高、a标签及background属性
行高和字号行高CSS中,所有的行,都有行高。盒模型的padding,绝对不是直接作用在文字上的,而是作用在文字“行”上的。文字,是在自己的行里面居中的。为了严格保证字在行里面居中,我们的工程师有一个约定: 行高、字号,一般都是偶数。这样,它们的差,就是偶数,就能够被2整除。单行文本垂直居中文本在行里面居中。 公式:行高=盒子高;<!DOCTYPE html> <html lang="en"> <h
css背景图片无法打印的问题求解???
如题 我的IE中已经设置过了 已经勾选了打印背景颜色和图片选项 可还是答应不出来 这是为什么呢 rnrn各位大侠指点下阿
CSS 背景属性background简写攻略:
常用的6个属性: background-color 背景颜色: 合法的颜色值 background-image 背景图像: url( ) background-repeat 如何重复背景图像: no-repeat,repeat,repeat-x,repeat-y background-attachment 背景图像是否固定或者随着页面的其余部分滚动:fixed,scroll background-...
CSS无法正确显示背景图片
css:rnul.menufont-size:22pxul.menu lidisplay:inline; list-style:none;rnul.menu li.menu_leftbackground:#FFF url(../../image/menu_left.png) no-repeat; width:17px; height:40px;rnul.menu li.menu_middlebackground:#fff url(../../image/menu_middle.png) repeat-x; width:200px; height:40px;rnul.menu li.menu_rightbackground:#fff url(../../image/menu_right.png) no-repeat; width:17px; height:40px;rnrnhtml:rn rn rn 首页rn 硬件DIYrn 硬件DIYrn 硬件DIYrn 硬件DIYrn 硬件DIYrn rn rnrn图片可以显示,但是宽高无法按照设定的值显示,如果有文字,他会显示文字和部分背景,如果没有文字,他就全部不显示了,我用的是这个模式,发现将他删了就可以正常显示,但是这个是规定不能删的,请问我的CSS代码要怎么改?
css 权重、圆角、background属性、透明度
CSS3 权重 CSS 权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式。 权重的等级 可以把样式的应用方式分为几个等级,按照等级来计算权重: 1、!important,加在样式属性值后,权重值为 10000 2、内联样式,如:style=””,权重值为1000 3、ID选择器,如:#content,权重值为...
关于CSS中background:url()属性
页面代码:rn[code=HTML]rnrn rn rn rn rn rn rn rn rn 首 页rn 研究方向rn 研究课题rn 研究团队rn 交流合作rn 研究成果rn 毕业成员rn 联系我们rn rn rn rn rn 实验室简介: rn rn rn XXXX内容XXXXrn rn rn rn rnrn[/code]rnCSS代码:rn[code=CSS]rn* rn outline:medium none;rnrnbody rn font-family:Verdana;rn font-size:12px;rn line-height:1.5;rnrna rn color:#000;rn text-decoration:none;rnrna:hoverrn color:#F00rnrn#headerrn background: url("../image/banner.png");rn height:150px;rn overflow:visible;rn position:relative;rn z-index:995;rnrn#header #menurn left:0;rn margin:0;rn overflow:visible;rn padding:0;rn position:absolute;rn top:75px;rn width:100%;rn z-index:990;rn border:1px solid #CCC;rn height:26px;rn background:#eee;rnrn#menu ulrn list-style:none;rn margin:0px;rn padding:0px;rnrn#menu ul lirn float:left;rn padding:0px 8px;rn height:26px;rn line-height:26px;rnrn[/code]rn用Chorme打开没问题,而IE和FF似乎都没有CSS的效果
activity背景图片太大
我做的是pad开发,app一直占用的内存都是15m左右,一段时间之后去看发现内存使用达到了50m。 几经周折发现是美工给的图片太大的原因,在不使用图片作为背景的时候内存回到了15m。 想了很多解决办法。比如在过度页面加载出图片的bitmapdrawable。使用的时候再用。或者 使用大的imageview再用框架加载。等等。 后来还是叫美工把图片缩小10倍。由于背景并不复杂所以看不出来失真
html 背景图片太大
html中背景图片很大,如何使其在任何尺寸的显示屏中都显示正中位置,即在宽屏上显示全部。在大屏上将两边多余部分隐藏,不出现横向的滚动条。
如何使背景图片background 平铺???
[code=HTML]rnrn[/code]rnrn点击图片后改变背景,虽然是全屏,但是是好几张拼的,怎么才能让图片平铺??就是一张图片平铺 全屏
相关热词 c# 标准差 计算 c#siki第五季 c#入门推荐书 c# 解码海康数据流 c# xml的遍历循环 c# 取 查看源码没有的 c#解决高并发 委托 c#日期转化为字符串 c# 显示问号 c# 字典对象池