当前位置:首页 » 背景图片 » css背景图片铺满
扩展阅读
炸鸡排图片高清 2024-10-26 06:33:35
小清新装修图片素材 2024-10-26 06:29:30
图片显示多少p 2024-10-26 06:20:15

css背景图片铺满

发布时间: 2022-02-07 00:03:43

❶ css怎样让背景充满整个屏幕

HTML
<!doctype html>
<html>
<body>
...Your content goes here...
</body>
</html>

给body标签指定背景图,这样背景图就可以填充整个浏览器viewport了。
其实,该方案对所有的块级容器都可以生效。块级容器的宽高是动态的,那么背景图将自动伸缩,充满整个容器。
CSS body标签的样式如下:
body {
/* 加载背景图 */
background-image: url(images/background-photo.jpg);

/* 背景图垂直、水平均居中 */
background-position: center center;

/* 背景图不平铺 */
background-repeat: no-repeat;

/* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */
background-attachment: fixed;

/* 让背景图基于容器大小伸缩 */
background-size: cover;

/* 设置背景颜色,背景图加载过程中会显示背景色 */
background-color: #464646;
}

上面最重要的一条就是:
background-size: cover;

这样浏览器就会按比例缩放背景图直至背景图宽高不小于容器的宽高(在上面的例子中,就是body标签)。
这里需要注意的一点就是:如果背景图小于body标签的尺寸(例如在高分辨率显示器上,或页面内容特别多时),浏览器会拉伸图片。都知道,当把一个图片拉伸时,图片会变模糊。
因此,在选择背景图时,要特别注意尺寸。为了照顾到大尺寸屏幕,demo里用的图片尺寸为5498px * 3615px 。
同时,为了让背景图始终相对于viewport居中,声明了:
background-position: center center;

上面的规则会把背景图缩放的原点定位到viewport的中心。
接下来需要解决的问题是:当内容的高度大于viewport的高度时,会出现滚动条。希望背景图始终相对于viewport固定,即使用户滚动时也是一样。
解决办法就是:
background-attachment: fixed;

❷ 怎样用css 使背景图片覆盖整个页面

覆盖整个页面也就需要图片占据整个屏幕或者占据整个html元素;
在css3出来之后,有一个属性background-size;
这个属性可以给背景图片设置大小,当值为100% 100%的时候也就是说把图片宽高都设置成百分百,然后元素有多大,图片就会伸展多大,也就是说的整个页面

❸ html css 如何一张图片铺满整个背景,不留空白的。并且图片是固定的

(1)body{background:url(背景图) repeat;} 说明:repeat表示背景图的平铺方式!其实一般你将一张图片作为背景时,会默认为平铺,所以不需要刻意去设置,相反如果我们不想图片平铺那么这时就需要设置为no-repeat;这时图片就会按原来的尺寸显示!
(2)如果图片过小,那么图片平铺就会出现重复的地方,其实和把一张图片设置为桌面墙纸类似! 我试过了,想要想铺满但是不重复的话选择一张1024X768的图片,当然这只是针对显示器为1024X768的! 具体选择就看你显示器的分辨率了!

❹ css设置div背景图,没法铺满的情况

我自己测试了一下,因为没有别的div的样式数据,所以看不出问题在哪里

你的问题可能是上一级的css影响的,另外我建议你给span也加上样式

❺ html 怎么让背景图铺满整个页面

下面这段代码给div设置了一个宽度和高度,然后添加了一张背景图片,并使用了background-size:cover;这个属性,就会自动放大或缩小背景图片来适应,但是需要指出的是这个属性在需要在IE9及以上版本支持,谷歌和火狐都支持,具体支持情况看上面的图,浅绿的代表支持,粉红的不支持,你也可以到caniuse.com自己查看支持性


<!DOCTYPEhtml>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;"charset="utf-8">

<title>无标题文档</title>

</head>

<styletype="text/css">

.div1{width:500px;height:600px;background:url(images/class_nav.jpg);background-size:cover;}

</style>

<body>

<DIVclass="div1"></div>

</body>

</html>

❻ html和css如何做到让一张图片铺满屏幕呢

比如<img id='bg' src='bg.jpg'/>

#bg{
position:fixed;

width:100%;

height:100%;

}

❼ CSS中如何设拉伸背景图片铺满屏幕

body{

background: url("image.png") no-repeat;

height:100%;

width:100%;

overflow: hidden;

background-size:cover;或者background-size:100%;

}

(7)css背景图片铺满扩展阅读:

CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

编程工具

记事本:使用Windows系统自带的记事本可以编辑网页。只需要在保存文档时,以.html为后缀名进行保存即可。

Dreamweaver:它与Flash、Fireworks并称网页三剑客。Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,它是第一套针对专业网页设计师特别开发的视觉化网页开发工具,利用它可以轻而易举地制作出充满动感的网页。

❽ css中如何调整插入背景图片的大小

可以通过cover和contain来对图片进行伸缩。

语法:

background-size:auto;/* 默认值,不改变背景图片的高度和宽度 */

background-size:100px 50px;/* 第一个值为宽,第二个值为高,当设置一个值时,将其作为图片宽度来等比缩放 */

background-size:10%;/* 0%~100%之间的任何值,将背景图片宽高按百分比显示,当设置一个值的时候同也将其作为图片宽度来等比缩放 */

background-size:cover;/* 将背景图片等比缩放填满整个容器 */

background-size:contain;/* 将背景图片等比缩放至某一边紧贴容器边缘 */

(8)css背景图片铺满扩展阅读:

CSS背景图片自适应、全屏、填充、拉伸

方法一:js控制

<div id="formbackground" style="position:absolute; width:100%; height:100%; z-index:-1">

<img src="pictures/background.jpg" height="100%" width="100%"/>

</div>

<div id="formbackground" style="position:absolute; z-index:-1;"><img src="10.jpg" height="100%" width="100%"/></div>

<script type="text/javascript">

$(function(){

$('#formbackground').height($(window).height());

$('#formbackground').width($(window).width());

});

</script>

方法二:全浏览器兼容

.bg{

background:url(http://wyz.67ge.com/wp-content/uploads/qzlogo.jpg);

filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";

-moz-background-size:100% 100%;

background-size:100% 100%;

}

❾ CSS 在<div>中设置背景图片不能充满整个页面

请问您是要问“CSS 在<div>中设置背景图片不能充满整个页面”,还是“层的四周都不会紧贴页面边缘”?如果是前一个,可以这样修改:
.backdiv{
background-image:url(Background.png);
background-repeat:repeat;
}
如果是后一个,请把问题说清楚一点!

❿ 如何让css背景图片占满全部背景,并且随着浏

设置背景图片所在div的宽高为100%,就能随屏幕大小变化而变化