HTML背景图片自适应
由于<body>标签的图片不能够拉伸,
解决办法:
1、图片不够大,又background属性不能拉伸图片; 2、只能用个div,把其z-index值设为负,并使这个div大小为整个body大小,在div里用<img> 3、body的background属性去掉,要不然会被遮住
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>hello world</title>
- </head>
- <body>
- <div id="Layer1" style="position:absolute; width:100%; height:100%; z-index:-1">
- <img src="pictures/background.jpg" height="100%" width="100%"/>
- </div>
- </body>
- </html>
细节:../ 表示的是返回上一级目录访问 tuxiang/ 表示访问的是同级目录中的tuxian
HTML背景图片自适应的更多相关文章
- 【Python全栈-CSS】CSS实现网页背景图片自适应全屏
CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...
- 基于html5背景图片自适应代码
基于html5背景图片自适应代码是一款背景不随滚动条滚动,会根据分辨率不同自动匹配对应的背景图片.效果图如下: 在线预览 源码下载 实现的代码. css代码: .jawbone-hero .jaw ...
- bootstrop设置背景图片自适应屏幕
如果不用bootstrop框架,想让背景图片自适应窗口大小,可以这样做: <style type="text/css"> html{height: %;} body.a ...
- CSS实现网页背景图片自适应全屏
一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...
- css设置背景图片自适应
CreateTime--2017年12月25日16:36:07 Author:Marydon 控制背景图片100%自适应填充布局 /* 控制背景图片100%自适应填充布局 */ body{ bac ...
- CSS实现网页背景图片自适应全屏,自适应背景图片
一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...
- css 背景图片自适应元素大小
一.一种比较土的方法,<img>置于底层. 方法如下: CSS代码: HTML: <img src="背景图片路径" /> <span>字在背景 ...
- 背景图片自适应整个页面CSS+DIV
<body style="overflow:hidden;"> <div class="wrapper"> <!--背景图片--& ...
- div背景图片自适应
对背景图片设置属性:background-size:cover;可以实现背景图片适应div的大小. background-size有3个属性: auto:当使用该属性的时候,背景图片将保持100% 的 ...
- H5 背景图片自适应屏幕问题解决办法
今天也是偶然遇到这个问题的,平成很少用到关于css的内容,就在网上找了很多个方法,最后总结以下几种很实用的方法 方法1: <style> body{ background:url(beij ...
随机推荐
- Blender设置界面语言
新安装的Blender默认是英文, 可通过如下方法修改界面语言: 1. 点开文件菜单{File},选择用户首选项{User Preferences}: 2. 在用户首选项{User Preferenc ...
- Ubuntu端口命令---查看端口占用及关闭
Ubuntu查看端口使用情况,使用netstat命令: 查看已经连接的服务端口(ESTABLISHED) netstat -a 查看所有的服务端口(LISTEN,ESTABLISHED) netsta ...
- 《DSP using MATLAB》Problem 6.21
代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...
- LeetCode – Group Shifted Strings
Given a string, we can "shift" each of its letter to its successive letter, for example: & ...
- 【UOJ#21】【UR#1】缩进优化
我好弱啊,什么题都做不出来QAQ 原题: 小O是一个热爱短代码的选手.在缩代码方面,他是一位身经百战的老手.世界各地的OJ上,很多题的最短解答排行榜都有他的身影.这令他感到十分愉悦. 最近,他突然发现 ...
- 公钥与私钥,HTTPS详解 转载
1.公钥与私钥原理1)鲍勃有两把钥匙,一把是公钥,另一把是私钥2)鲍勃把公钥送给他的朋友们----帕蒂.道格.苏珊----每人一把.3)苏珊要给鲍勃写一封保密的信.她写完后用鲍勃的公钥加密,就可以达到 ...
- 打印流-PrintStream和PrintWriter
概念: 打印流是输出信息最方便的类,注意包含PrintStream(字节打印流)和 PrintWriter(字符打印流).打印流提供了非常方便的打印功能,可以打印任何类型的数据信息,例如:小数,整数, ...
- 关于宽带接两台路由,并且第二台需要关闭DHCP的设置
关于宽带接两台路由,并且第二台需要关闭DHCP的设置 https://wenku.baidu.com/view/e317a12d4b35eefdc8d333cb?pcf=2#1
- day 34 线程队列 线程池 协程 Greenlet \Gevent 模块
1 线程的其他方法 threading.current_thread().getName() 查询当前线程对象的名字 threading.current_thread().ident ...
- thinkphp5 怎么获取当前的模块,控制器和方法名
//当前模块url地址 $request= Request::instance(); $module_name=$request->module(); $controller_name=$req ...