css 如何固定网页背景,并且随浏览器的像素大小而变!

html-css025

css 如何固定网页背景,并且随浏览器的像素大小而变!,第1张

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属性设置成负值。用脚本判断窗口大小,在每次窗口大小发生改变时监听事件捕获长宽,赋值给这张“地图”。

float:right

width:163px

height:105px

margin-right:0

margin-top:0

background-image:url(images/t_06.jpg)}#right a{position:absolute

display:block

width:108px

height:26px}#right a:hover{

border:1px solid #ffcc00

}/*定义hover时的样式*/

#right .one a{top:10pxright:110px

} /* 第一个热点链接位置的*/

#right .two a{top:40pxright:110px

}/* 第二个热点链接位置的*/

#right .three a{top:70pxright:110px

}/* 第二个热点链接位置的*/

在html中加入以下<body<div id="top"

<li id="right"<ul<li class= "one " <a href= "# " 第一个热点</a </li

<li class= "two " <a href= "# " 第二个热点</a </li

<li class= "three " <a href= "# "第三个热点 </a </li</ul</li</div</body

注:top是整个页面上部分的定义,这个是接上面的一部分,主要是讲解添加热点。在网站制作的过程中是很使用的一块,可以根据情况做些改动。

div默认就没有背景吧,

如果是你自己写,背景这快不写就成了,

如果你是改别人的只是要背景的话透明你可以直接找到那对应的样式表中导航条部分的背景去掉啊。

你可以再详细点描述下你的问题,或者截个图。说下是哪里出现了你不想要的背景啦神马的~