css 如何固定网页背景,并且自动适应浏览器大小!
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 如何固定网页背景,并且自动适应浏览器大小!相关的知识,希望对你有一定的参考价值。
css 如何固定网页背景,并且随浏览器的像素大小而变!比如说浏览器的屏幕分辨率是1280*768的,图片是3000*3比如说浏览器的屏幕分辨率是1280*768的,图片是3000*3000的!怎么样让图片能自动缩小,切固定没有滚动!
1、 css不能控制背景图的大小, 有的屏幕是长方形的,有的还是正方形的了,你如果只控制它的宽,没准就会出现滚动条,你宽高都控制,它就变形了,所以说只能让大的浏览器显示的多一些,小的浏览器显示的少一点,样式代码如body background:url("1.jpg") no-repeat center top fixed;2、 如果是在网页里面插入图片的话,可以控制图片的大小,控制它的宽,高估计就会出现滚动条,控制高,估计宽会出现滚动条,都控制,则变形,代码:<body onload="auto_height()">
<script>
function auto_height()
var w= document.documentElement.clientWidth;
var high = document.getElementById("d2").getElementsByTagName("img")[0];
high.width=w;
</script>
<div id="d2"><img src="11.jpg" /></div>
</body>
综上所诉,你的要求是达不到的,建议你选第一个方法,我们做网站都是这么做的。 参考技术A 你说的问题css是实现不了的,因为css不能控制背景图片的宽高,只能控制图片的位置,所以你这个问题,只能寻求其他方法! 参考技术B css固定背景图片,随着分辨率的大小图片的显示内容也不一样比如说浏览器的屏幕分辨率是1280*768的,图片是3000*3,图片能显示宽1280px,其他的看不全屏幕分辨率是1600*900的,图片是3000*3,只能显示宽1600px,图片两侧的看不到了随着屏幕分辨率变化自动隐藏多出部分background:url(图片) center fixed; 参考技术C 这个效果用css很难实现,不过固定很简单,只需要background-attachment:fixed;就可以了。另外宽度可以设定为百分比,图片大小不变化,但是会随着浏览器的窗口变化自动隐藏多出部分。 参考技术D 先定义html,bodyheight:100%
再设置imgheight: 百分比
就可以了
以上是关于css 如何固定网页背景,并且自动适应浏览器大小!的主要内容,如果未能解决你的问题,请参考以下文章