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

最新推荐文章于 2023-11-28 11:56:00 发布
最新推荐文章于 2023-11-28 11:56:00 发布
阅读量1.5w 收藏 32
点赞数 4
分类专栏： css html 文章标签： webview html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zunguitiancheng/article/details/121924662
版权
css 同时被 2 个专栏收录
44 篇文章 0 订阅
订阅专栏
html
33 篇文章 0 订阅
订阅专栏

方法一、background背景图片设置
html,
body {
    width: 100%;
    height: 100%;
    background: url(../images/bg.png) no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;/* 不设置的话页面滑动时，背景会不铺满*/
}

方法二、图片绝对定位实现
<body>
    <div id="Layer1" style="position:absolute; width:100%; height:100%; z-index:-1">
        <img src="images/bg.png" height="100%" width="100%" />
    </div>
</body>

原文链接：https://blog.csdn.net/qq_36699230/article/details/104051318

简单的绿竹
关注
  • 4
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用Vue-cli 中为单独页面设置背景图片铺满全屏
10-15
主要介绍了使用Vue-cli 中为单独页面设置背景图片铺满全屏，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【html背景图片铺满网页】html 怎么让背景图铺满整个页面
04-11
html背景图片铺满网页
html 怎么让背景图铺满整个页面
热门推荐
AMU的博客
03-12 5万+
为了让背景图片铺满整个页面，我们可以这样设置
html 背景图铺满整个页面背景图片居中
菜鸡的博客
06-01 2333
html 背景图铺满整个页面背景图片居中
background简写方式图片铺满元素的几种写法
June.1
04-24 1万+
示例图片 一、裁剪铺满背景,不拉伸图片形状。不要求全部展示图片的可以使用 <style> .bg{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url("bg-test.j...
全面解析background背景铺满
luotaif的博客
07-25 3790
当我们给网页设置一个背景图或背景色时，如果这张背景图或背景色不能够填满整个网页，就会出现下面这样的情况：body {而background背景铺满就是指让背景色或背景图自动缩放铺满整个网页，不留任何空隙。通过background-size属性可以轻松实现background背景铺满，而通过background-position、background-attachment等属性的设置，可以使背景图像更加美观、完整。而动态背景则可以为网页增添生动感、节奏感。
笔记-CSS样式
u014793354的博客
09-30 665
css - 背景图片充满整个屏幕 body { /* 加载背景图 */ background: url("…/static/images/index/backImg.jpg") no-repeat; /* 背景图垂直、水平均居中 */ background-position: center center; /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */ backg...
css中background:url背景图片如何铺满并正常显示
m0_37866091的博客
12-22 9161
.box{ height: 300px; width: 300px; background:url('../imgs/108.png') no-repeat center 0px; background-position: center 0px; background-size: cover; text-indent: -999px; } 说明： url(‘图片路径’)——图片路径的位置； no-repeat—— 图片不重复； repeat-x是横向铺满，就
div设置background图片后怎么让图片铺满div
最新发布
fury的博客
11-28 6521
可以使用CSS中的background-size属性和background-image属性来实现将图片作为一个div的背景图并撑满屏幕的效果。当时用background-size:cover属性还是不行,尝试background-size:contain属性。可以使用background-image属性来完成。background-image: url("图片路径");background-image: url("图片路径");background-image: url("图片路径");
背景图片相关应用-铺满，自适应
m0_54088431的博客
06-08 5415
数值，或者top,right,bottom,left等，center：距离页面左边的定位，0px：距离页面上面的定位auto：默认值，保持背景图片的原始高度和宽度。contain：缩放为尽可能大的尺寸（但其宽度和高度都必须适合内容区域）。宽跟父级一样高后，就不会缩放了,当宽度或高度和盒子尺寸相等，图片就不再缩放.这样，取决于背景图像和背景定位区域的比例，可能存在一些未被背景图像覆盖的背景区域。cover：缩放背景图像，以使内容区域完全被背景图像覆盖（其宽度和高度均等于或超过内容区域）。图片完全覆盖到整个盒子
table合并单元格与img图片铺满整个td的html
09-28
主要介绍了table合并单元格与img图片铺满整个td的html,需要的朋友可以参考下
CSS实现HTML背景图片拉伸铺满示例
09-25
HTML背景图片拉伸铺满，使用CSS实现图片的width和height均100%，具体如下，感兴趣的朋友可以参考下
怎么让背景铺满整个页面_word怎么让背景图片铺满整个页面
weixin_29224529的博客
01-14 9363
要把图片布满整个word中的A4界面中，以word2007为例，具体步骤如下：打开word之后，默认的界面就是A4界面大小，点击“插入”下面的“图片”，从电脑选择要铺满word页面的图片，点击“插入”；点击“文字环绕”的下拉菜单，选择“衬于文字下方”；用鼠标拖拽图片使它铺满整个页面；调整好图片之后，即可看到图片布满整个word的A4界面了需要调整页边距为0图片铺满即可.www.how23...
background背景图同比缩放铺满整个页面方法的时候碰到的问题
无缺的博客
05-30 1万+
做了那么多的静态页，没想到还是碰到了一个让我懵B的问题，问题：    我这里用了background-size:cover；背景图同比缩放铺满这个页面之后，如果拉伸屏幕，会发现如下图    尴尬，里面的内容还是原来的位置，但是图片同比缩放这样设置肯定是不行的，解决代码如下：    这个问题可能不算什么技术难点，不过遇到了解决了，就记录下来...
【CSS】background-image背景图片全屏铺满自适应
东小小川
07-14 1996
【CSS】background-image背景图片全屏铺满自适应
CSS实现背景图片全屏铺满自适应的方式（3种）
蓝胖子的博客
11-07 1万+
CSS实现背景图片全屏铺满自适应的方式（3种）
HTML 背景图布满整个div
路漫漫其修远兮，吾将上下而求索
12-07 1万+
在编写HTML代码时，偶尔会遇到这种情况，我们要展示的背景图的大小与实际的div大小不一致（此时的背景图是静态资源而非接口请求数据）。 设置背景图的css是background: url(...) 假设现在有一张背景图的长宽是100px*100px， 而外层的div大小是400px*400px，那么根据以下代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
CSS：实现background-image背景图片全屏铺满自适应
qq_19306197的博客
09-24 1135
CSS：实现background-image背景图片全屏铺满自适应
css背景图片铺满整个页面
06-06
想要让CSS背景图片铺满整个页面，可以使用下列代码： ``` body { background-image: url("your-image.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; } ``` 其中，`background-image`是要使用的图片路径，`background-size`指定图片的大小，这里使用`cover`让图片完全覆盖整个页面。`background-position`指定图片的位置，这里使用`center`让图片居中。`background-repeat`指定图片是否重复，这里使用`no-repeat`让图片不重复。 如果想要让固定的页面元素（例如头部导航栏）不受背景图片影响，可以将上述代码应用在类似下面这样的`div`中： ``` .background { background-image: url("your-image.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; } ``` 然后将需要不受影响的元素放在另一个`div`里面，比如： ``` <div class="background"> <div class="navbar"> <!-- 头部导航栏内容 --> </div> </div> ``` 这样一来，头部导航栏就可以正常地显示在页面上，而背景图片仍然可以覆盖整个页面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值