欢迎光临
我们一直在努力

如何用js使背景图片铺满界面,HTML怎么可以让图片铺满整屏而自适应不同窗口大小

1,HTML怎么可以让图片铺满整屏而自适应不同窗口大小

宽度设置为100%;用百分比做就好了,还可以用js获取窗口宽度和高度,来重新设置图片的宽度和高度
不明白啊 = =!

HTML怎么可以让图片铺满整屏而自适应不同窗口大小

2,html里如果让背景图片根据屏幕大小铺满屏幕不重复

css3支持,background-size:cover
html里,让背景图片根据屏幕大小铺满屏幕不重复,具体方法如下:1、首先我们用Dreamweaver软件做一个html文档,当然用其他编辑器也可以。2、然后给body设置一个背景图片,这里小编给body加了一个高度,以便能看到图片。3、然后先在浏览器中预览一下效果。会看到图片两遍有空白,没有填充满整个屏幕。4、将background-size,可以设置其值为100%。5、需要注意的是这是css3增加的新属性,旧版本的浏览器可能不支持。所以有时需要更新浏览器。
css中写bodymargin:0;background:url(images/bg.jpg) no-repeat;background-size:100% 100%;}
bodybackground:url(images/bg.jpg) repeat-x;}以上是让背景图片向X轴延伸将屏幕铺满,若是要它向y轴延伸则是:bodybackground:url(images/bg.jpg) repeat-y;}
css中写body margin:0;background:url(images/bg.jpg) repeat-x;}先清空body的外边距。再设置x或者y轴的循环平铺

html里如果让背景图片根据屏幕大小铺满屏幕不重复

3,如何将背景图片占满整个网页CSSJS都可以

动易支持,你可以下载动易的源码来分析
<script type=”text/javascript”>
$(function(){
// #Photo 图片id
var bodyheight = $(window).height();
var bodywidth = $(window).width();
$(“#Photo”).css({ height: parseInt(bodyheight), width: parseInt(bodywidth) });
$(window).resize(function () {
var bodyheight = $(window).height();
var bodywidth = $(window).width();
$(“#Photo”).css({ height: parseInt(bodyheight), width: parseInt(bodywidth) });
});
});
</script>
<style type=”text/css”>
#Photo{
position:fixed;
left:0;
top:0;
z-index:-1;
}
</style>

<body>

<img alt=”” src=”Content/Images/2_07.png” id=”Photo” />

</body>

如何将背景图片占满整个网页CSSJS都可以

赞(0)
【声明】:本博客不参与任何交易,也非中介,仅记录个人感兴趣的主机测评结果和优惠活动,内容均不作直接、间接、法定、约定的保证。访问本博客请务必遵守有关互联网的相关法律、规定与规则。一旦您访问本博客,即表示您已经知晓并接受了此声明通告。