HTML中使背景图片自适应浏览器大小

 由于<body>标签的图片不能够拉伸,

解决办法:

1、图片不够大,又background属性不能拉伸图片; 2、只能用个div,把其z-index值设为负,并使这个div大小为整个body大小,在div里用<img> 3、body的background属性去掉,要不然会被遮住

[html] view plain copy

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>hello world</title>
  6. </head>
  7. <body>
  8. <div id="Layer1" style="position:absolute; width:100%; height:100%; z-index:-1">
  9. <img src="pictures/background.jpg" height="100%" width="100%"/>
  10. </div>
  11. </body>
  12. </html>

有一点不完美!楼主代码应该改成

[html] view plain copy

  1. <div style="position:absolute; width:100%; height:100%; z-index:-1; left:0; top:0;">
  2. <img src="pictures/background.jpg" height="100%" width="100%" style="left:0; top:0;">
  3. </div>

如此做才使得图片周围没有多余的白边。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Windows Community

Extensions in UWP Community Toolkit - SurfaceDialTextbox

概述 UWP Community Toolkit Extensions 中有一个为TextBox 提供的 SurfaceDial 扩展 - SurfaceDia...

3778
来自专栏熊二哥

Markdown快速入门

现在博文写作次数渐渐变多,经常看到很多园友的博文样式都非常的美观,个人虽然是个土鳖,但对美也是有很强需求的,同时由于最近将要上线一个博客项目,因此也很关心如何可...

2396
来自专栏MasiMaro 的技术博文

菜单的使用

2)弹出式菜单:一般在顶级菜单上都有很多菜单项,单击这些菜单项时会弹出一个下拉式的菜单项,我们点击的这个菜单称为弹出式菜单

1174
来自专栏林德熙的博客

win10 uwp dataGrid Microsoft.Toolkit.Uwp.UI.Controls.DataGrid表格控件

首先需要通过 Nuget 搜索 Microsoft.Toolkit.Uwp.UI.Controls.DataGrid 安装

7261
来自专栏Windows Community

Windows Community Toolkit 3.0 - InfiniteCanvas

InfiniteCanvas 是一个 Canvas 控件,它支持无限画布的滚动,支持 Ink,文本,格式文本,画布缩放操作,撤销重做操作,导入和导出数据。

773
来自专栏MasiMaro 的技术博文

Windows程序设计学习笔记(四)自绘控件与贴图的实现

Windows系统提供大量的控件供我们使用,但是系统提供的控件样式都是统一的,不管什么东西看久了自然会厌烦,为了使界面更加美观,添加一些新的东西我们需要自己绘制...

1072
来自专栏xingoo, 一个梦想做发明家的程序员

快捷键整理

Eclipse 跳转到指定行:ctrl+l 1几个最重要的快捷键 代码助手:Ctrl+Space(简体中文操作系统是Alt+/) 快速修正:Ctrl+1 单词补...

1869
来自专栏林德熙的博客

WPF 使用 SharpDX 在 D3DImage 显示 介绍创建控件D3D 设备设置指针画出来

本文告诉大家如何使用 SharpDX 在 D3DImage 显示。在上一篇WPF 使用 SharpDX只是使用窗口,也就是无法使用其它的 WPF 控件。所以这一...

2941
来自专栏DannyHoo的专栏

initialize

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

961
来自专栏LinXunFeng的专栏

iOS - 关于NSTimer的循环引用

1313

扫码关注云+社区

领取腾讯云代金券