相关文章推荐
闯红灯的手术刀  ·  初学Qt不会样式表怎么办,打包好的Qt样式表 ...·  16 小时前    · 
想旅行的太阳  ·  Moment.js获取当前时间格式化-阿里云 ...·  1 年前    · 
卖萌的勺子  ·  PostgreSQL 递归查询 (转) - ...·  1 年前    · 
发怒的棒棒糖  ·  如何在Linux上使用grep只显示文件名? ...·  2 年前    · 
俊逸的青蛙  ·  Linq之GroupBy用法_linq ...·  2 年前    · 
Code  ›  HTML中使背景图片自适应浏览器大小开发者社区
自适应 腾讯 html代码 background
https://cloud.tencent.com/developer/article/1343809
温柔的香烟
1 年前
作者头像
bear_fish
0 篇文章

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

前往专栏
腾讯云
开发者社区
文档 意见反馈 控制台
首页
学习
活动
专区
工具
TVP
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP
返回腾讯云官网
社区首页 > 专栏 > 用户2442861的专栏 > HTML中使背景图片自适应浏览器大小

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

作者头像
bear_fish
发布 于 2018-09-20 09:45:54
2.8K 0
发布 于 2018-09-20 09:45:54
举报

由于<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=" 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=" 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>

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

本文参与 腾讯云自媒体分享计划 ,分享自作者个人站点/博客。
原始发表:2016年05月06日, 如有侵权请联系 cloudcommunity@tencent.com 删除
其他

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

其他
评论
登录 后参与评论
0 条评论
热度
最新
登录 后参与评论
关于作者
bear_fish
0
文章
0
累计阅读量
0
获赞
前往专栏
领券
  • 社区

    • 专栏文章
    • 阅读清单
    • 互动问答
    • 技术沙龙
    • 技术视频
    • 团队主页
    • 腾讯云TI平台
  • 活动

    • 自媒体分享计划
    • 邀请作者入驻
    • 自荐上首页
    • 技术竞赛
  • 资源

    • 技术周刊
    • 社区标签
    • 开发者手册
    • 开发者实验室
  • 关于

    • 社区规范
    • 免责声明
    • 联系我们
    • 友情链接

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

  • 域名注册
  • 云服务器
  • 区块链服务
  • 消息队列
  • 网络加速
  • 云数据库
  • 域名解析
  • 云存储
  • 视频直播

热门推荐

  • 人脸识别
  • 腾讯会议
  • 企业云
  • CDN加速
  • 视频通话
  • 图像分析
  • MySQL 数据库
  • SSL 证书
  • 语音识别

更多推荐

  • 数据安全
  • 负载均衡
  • 短信
  • 文字识别
  • 云点播
  • 商标注册
  • 小程序开发
  • 网站监控
  • 数据迁移

Copyright © 2013 - 2023 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

深圳市腾讯计算机系统有限公司 ICP备案/许可证号: 粤B2-20090059 深公网安备号 44030502008569

腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

问题归档 专栏文章 快讯文章归档 关键词归档 开发者手册归档 开发者手册 Section 归档

Copyright © 2013 - 2023 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论
 
推荐文章
闯红灯的手术刀  ·  初学Qt不会样式表怎么办,打包好的Qt样式表一键生成送给你。-阿里云开发者社区
16 小时前
想旅行的太阳  ·  Moment.js获取当前时间格式化-阿里云开发者社区
1 年前
卖萌的勺子  ·  PostgreSQL 递归查询 (转) - 素净 - 博客园
1 年前
发怒的棒棒糖  ·  如何在Linux上使用grep只显示文件名?[关闭]
2 年前
俊逸的青蛙  ·  Linq之GroupBy用法_linq groupby_仰望星空的代码的博客-CSDN博客
2 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号