网页制作网页中,如何让背景图片在任何电脑显示频上看都是满屏,宽度刚好的?(没有左右滚动条的)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了网页制作网页中,如何让背景图片在任何电脑显示频上看都是满屏,宽度刚好的?(没有左右滚动条的)相关的知识,希望对你有一定的参考价值。

制作背景的尺寸(宽度)是多少?

参考技术A 用代码的方法控制网页的滚动条:供参考
1、overflow内容溢出时的设置(设定被设定对象是否显示滚动条)
2、overflow-x水平方向内容溢出时的设置
3、overflow-y垂直方向内容溢出时的设置
以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。
具体设置如下:
1、让浏览器窗口永远都不出现滚动条
<body style="overflow-x:hidden;overflow-y:hidden">
或<body style="overflow:hidden">
2、没有水平滚动条
<body style="overflow-x:hidden">
3、没有垂直滚动条
<body style="overflow-y:hidden">

具体的操作是:
1、在你的html文件上打右键,选择“打开方式”中的“记事本”
2、弹出的记事本窗口中显示的是相关HTML文件的网页源代码,选取上述控制滚动条代码中符合您需要的代码,
将它复制到网页源代码最后两行的中间,然后按记事本窗口菜单“文件\保存”,关闭记事本窗口。
3、双击HTML文件,在浏览器窗口中看看,是不是已经达到您的要求了?

尽管以上的方法可以满足您的要求,但如果您的页面宽度大过浏览器宽度很多的话,那就会有些页面内容看不到了。所以您设计页面时,宽度还是要与您的浏览器分辨率设置相当才好。
参考技术B css代码:
background-repeat:repeat;

background-repeat是针对背景平铺的属性设置,可选的值包含:
repeat 即默认方式,完全平铺背景;
no-repeat 在X及Y轴方向均不平铺;
repeat-x 横向平铺背景;
repeat-y 纵向平铺背景。追问

那再PS制作背景时,背景的尺寸(宽度)是多少呢?

追答

那要看需要什么背景,如果只是单色背景尺寸1x1,然后平铺就行了。如果是过渡颜色的背景则需要一定高度或宽度的图
通常不要放一整张图片,那样加载会很慢,而且不同尺寸浏览器下回变形

本回答被提问者和网友采纳
参考技术C background-repeat:repeat;

放在body里面

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: 百分比

就可以了

以上是关于网页制作网页中,如何让背景图片在任何电脑显示频上看都是满屏,宽度刚好的?(没有左右滚动条的)的主要内容,如果未能解决你的问题,请参考以下文章

网页图片如何放大显示

如何让电脑全屏显示视频

为何电脑端Chrome 打开部分网站都显示的是手机端界面?

如何让网页渐渐变暗?

如何让网页自适应屏幕大小

怎么让网页加载完成后再显示