如何让背景图片平铺满整个浏览器页面

最新推荐文章于 2024-02-22 22:10:42 发布
最新推荐文章于 2024-02-22 22:10:42 发布
阅读量1.3w 收藏 26
点赞数 13
分类专栏： 【10】CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/longgeaisisi/article/details/84590755
版权

效果图
在这里插入图片描述代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<title></title>
</head>
<body>
	<img width="100%" height="100%" src="__IMGFFCS__/css/img/zjy/bg.png" style="position:absolute; left:0; top:0; z-index:-1;"/>
</body>
</html>

原理：把图片相对于浏览器决定定位，把层级设为-1之后就其他元素就显示在它上面了，比较适合登录功能的背景图平铺整个页面。

林猛男
关注
  • 13
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Avant Browser 2010 budil 126||稳定，便捷，不假死~
12-08
软件介绍： Avant浏览器的用户友好界面为你浏览体验带来清晰而有效的全新体验，频繁的升级稳步的提高了他的可靠性。 多进程：多进程的设计给你带来不崩溃、不死锁、没有内存泄露的网络浏览器体验和高稳定性。当一个标签死锁的时候，他不会导致你整个浏览器没响应或者其他页面死锁。 在线书签：通过Avant的在线存储可以任何地方，办公司、家里、网吧访问你的书签，而且不需要担心重装系统时丢失数据。加密的独立书签文件格式可以在公用电脑上保护你的隐私。 自动填充：忘记了网页密码？Avant浏览器可以为你记住密码。你只需要简单的一击就可以填写网页表格。并且你可以设置一个主密码来保护你的所有的表单信息。 Flash动画过滤：正在经历使用GPRS/3G连接网络时网页加载速度慢？网页中85%以上的flash动画都是广告。这些flash文件相当大，通常占你所访问网页大小的90%以上。使用Avant浏览器你只需要简单的一击就可以通过阻止下载这些Flash文件来节省带宽。 广告/弹窗过滤器：点击一下鼠标轻松过滤不需要的广告横幅和弹出页面。 鼠标手势：如果你在网页上点击鼠标中键，链接会在一个新窗口中打开并在后台运行。这个功能在打开论坛帖子的时候非常有用。Avant 浏览器同样具有自定义鼠标手势的功能，使用这种功能，你可以移动鼠标，轻松操作浏览器。 隐私浏览：作为一个隐私模式的设计，Avant浏览器不会在你的电脑中保存网页数据。因此，在你使用隐私浏览期间，与你共用电脑的人将不能看到你访问过哪些网站、网页和文件。 更新日志： [Fix]打开about:blank空白链接的问题 [Fix]通过浮动工具栏保存图片Save As dialog不弹出 [Fix]关于自动滚屏的一些问题 [Fix]Avant总是在建立新进程的时候把图片保存到了系统默认目录 [Fix]在建立新标签后立即输入url失败 [Fix]Xp/IE6上新建的标签和预定义的页面缩放比例不一致 [Fix]有时候背景窗口弹出前台 [Fix]有时候Title Bar和页面内容不一致 [Fix]browser:home中的搜索功能失效 [Fix]设置为在前台打开链接时ctrl+shift+鼠标左键单击功能错误 [Fix]通过AB选项->清除记录->最近关闭标签 无法清除最近关闭历史 [Fix]与javascript相关的一些页面错误 [Add]三个热键： 文件->保存屏幕为图片（Shift+Ctrl+S）、保存为图片（Shift+Ctrl+A）、保存选中区域为图片（Shift+Ctrl+Q）
【html背景图片铺满网页】html 怎么让背景图铺满整个页面
04-11
html背景图片铺满网页
拉伸图片覆盖整个页面的css写法
最新发布
u013558123的博客
02-22 544
拉伸图片覆盖整个页面的css写法
使用Vue-cli 中为单独页面设置背景图片铺满全屏
10-15
主要介绍了使用Vue-cli 中为单独页面设置背景图片铺满全屏，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
css高度背景怎么填充整屏,004-CSS怎样让背景充满整个屏幕
weixin_39752941的博客
08-04 654
...Your content goes here...给body标签指定背景图，这样背景图就可以填充整个浏览器viewport了。其实，该方案对所有的块级容器都可以生效。块级容器的宽高是动态的，那么背景图将自动伸缩，充满整个容器。CSS body标签的样式如下：body {/* 加载背景图 */background-image: url(images/background-photo.jpg);...
在HTML中怎样是背景图片铺满整个页面又不重复
wwjlq的博客
07-27 2万+
3种CSS实现背景图片全屏铺满自适应的方式
tianxianghuiwei的博客
11-13 7387
以上就是我今天与你分享的内容，如果你觉得有帮助，请记得分享给你的朋友，也许能够帮助到他。
如何让网页背景图铺满整页(html+csss实现网页背景图铺满整页)；a标签删下划线、禁用；innerHTMLouterHTML；css字体间距hover图片放大
qq_45699990的博客
03-31 6397
background背景图片设置 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:absol.
怎么让背景图片铺满整个页面
丹
01-20 1万+
方法一、background背景图片设置 html, body { width: 100%; height: 100%; background: url(../images/bg.png) no-repeat; background-size: 100% 100%; background-attachment: fixed;/* 不设置的话页面滑动时，背景会不铺满*/ } 方法二、图片...
html加入图片如何自动平铺,html怎么设置背景图片全屏平铺？
weixin_36253081的博客
05-31 7005
html怎么设置背景图片全屏平铺？1、新建一个html文档。2、设置一下HTML的框架，然后把图片设置在同一个文件夹里面。3、加入，这样可以有样式设置。4、因为背景设置在主体，所以还要定义为body{}。5、background-image:url(图片)，这个是添加图片的意思。6、然后我们需要加入background-repeat:repeat-x;这个时候就会横向平铺。7、background...
html 怎么让背景图铺满整个页面
热门推荐
AMU的博客
03-12 5万+
为了让背景图片铺满整个页面，我们可以这样设置
CSS实现HTML背景图片拉伸铺满示例
09-25
HTML背景图片拉伸铺满，使用CSS实现图片的width和height均100%，具体如下，感兴趣的朋友可以参考下
table合并单元格与img图片铺满整个td的html
09-28
主要介绍了table合并单元格与img图片铺满整个td的html,需要的朋友可以参考下
HTML设置背景图片填满整个页面
Marie的博客
03-14 1万+
在标签里添加文件路径，语法如下： 这时，页面虽然充满了背景，但被填充了多次。 在里添加样式，代码如下： style=" background-repeat:no-repeat ; background-size:100% 100%; background-attachment: fixed;" 你看，背景就充满页面了。 图片自适应窗口大小：background-size:contain...
css如何让背景图片平铺？css背景图片平铺四种方式介绍-前端教程
web前端入门基础进阶教程-htmlcssjs
06-30 5557
在网页设计的过程中，有时候可能会要求背景图片平铺，因为这样会让整个网页看起来比较好看，图片平铺可以不用具体设置body宽度和高度大小，就可以直接将图片平铺整个页面，那么，如何让背景图片平铺呢？接下来本篇文章将给大家来介绍关于css让背景图片平铺的方法，有需要的朋友可以参考一下。 我们首先来看一下css设置背景图片平铺方式。 repeat：即默认方式，完全平铺背景； no-repeat：在X及Y轴方向均不平铺； repeat-x：横向平铺背景； repeat-y：纵向平铺背景。 下面我们就来看一下css的
如何让css背景图片占满全部背景，并且随着浏览器缩放图片保持长宽不变呢？
QC班长的博客
06-02 5万+
style> .body{ background-image: url('${basepath}/resource/images/loginb1.jpeg'); background-size: 100%; background-repeat:no-repeat; } style> css代码添加背景图片常用代码　　1 背景颜色 {
php网页 背景图片,CSS实现网页背景图片自适应全屏详解
weixin_31688273的博客
03-10 838
本文主要和大家介绍CSS实现网页背景图片自适应全屏的方法的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。网页背景自适应全屏.PNG一张清晰漂亮的背景图片能给网页加分不少，设计师也经常会给页面的背景使用大图，我们既不想图片因为不同分辨率图片变形，也不希望当在大屏的情况下，背景有一块露白，简而言之，就是实现能自适应屏幕大小又不会变形的背景大图，...
CSS实现响应式全屏背景图
dianchamian8747的博客
03-14 4258
body { /* 加载背景图 */ background-image: url(images/background-photo.jpg); /* 背景图垂直、水平均居中 */ background-position: center center; /* 背景图不平铺 */ background-repeat: no-repeat; /* 当内容高度大于图片...
CSS实现背景图片全屏铺满自适应的方式（3种）
蓝胖子的博客
11-07 1万+
CSS实现背景图片全屏铺满自适应的方式（3种）
css背景图片铺满整个页面
06-06
想要让CSS背景图片铺满整个页面，可以使用下列代码： ``` body { background-image: url("your-image.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; } ``` ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值