css -- 背景图片自适应屏幕大小
由于<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>
css -- 背景图片自适应屏幕大小的更多相关文章
- css 背景图片自适应元素大小
一.一种比较土的方法,<img>置于底层. 方法如下: CSS代码: HTML: <img src="背景图片路径" /> <span>字在背景 ...
- html/css背景图片自适应分辨率大小
<style type='text/css'> .bgbox { position: absolute; left: 0; top: 0; width: 100%; overflow: h ...
- css 背景图片自适应分辨率大小 兼容
拉伸,all浏览器兼容.bg{ background:url(http://wyz.67ge.com/wp-content/uploads/qzlogo.jpg); filter:&q ...
- bootstrop设置背景图片自适应屏幕
如果不用bootstrop框架,想让背景图片自适应窗口大小,可以这样做: <style type="text/css"> html{height: %;} body.a ...
- html 网页背景图片根据屏幕大小CSS自动缩放
https://blog.csdn.net/coslay/article/details/47109281 腾讯微博和QQ空间的登录背景图片是根据访客的屏幕大小自动缩放的,但是好像是用JQuery代码 ...
- picturefill + picture 标签 实现兼容性很棒的 响应式图片 自适应 屏幕大小
polyfill 它是一个能够补齐浏览器兼容性问题的一个东西,使用到的<picture></picture>标签 ,并不是所有浏览器都支持,为了实现更好的兼容效果,这里就使用到 ...
- H5 背景图片自适应屏幕问题解决办法
今天也是偶然遇到这个问题的,平成很少用到关于css的内容,就在网上找了很多个方法,最后总结以下几种很实用的方法 方法1: <style> body{ background:url(beij ...
- HTML中使背景图片自适应浏览器大小
由于<body>标签的图片不能够拉伸, 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个bod ...
- css 背景图片自适应
body{ height:100%; overflow:hidden;} .bg { background-image: url(../../img/beijing.jpg); width:100%; ...
随机推荐
- docker lnmp php
使用 Docker 构建 LNMP 环境 https://segmentfault.com/a/1190000008833012 Docker 快速上手指南 https://segmentfault. ...
- python标准库介绍——13 types 模块详解
== types 模块== ``types`` 模块包含了标准解释器定义的所有类型的类型对象, 如 [Example 1-86 #eg-1-86] 所示. 同一类型的所有对象共享一个类型对象. 你可以 ...
- 获取Android运行apk的packagename 和activityname
自动化测试中经常遇到这个问题,关于这个题目,方法众多,咱的目的是找个比较简单靠谱的: 方法一: 先进入cmd窗口,adb shell 后: cd /data/data ls 可以看到包名了吧,缺点很明 ...
- 啸叫抑制(howling suppression)
作者:桂. 时间:2017-05-16 链接:http://www.cnblogs.com/xingshansi/p/6862683.html 前言 下午看到群里讨论有人提到这个问题,记录一下. 一. ...
- t-sql的一些经验
1.存储过程的3种传回值: 1.以return传回整数 2.以output格式传回参数 3.recordset 2.字符串类型的变量需要初始化后再使用,不然永远是空 DECLARE @FieldsSq ...
- hdoj2037 今年暑假不AC
今年暑假不AC Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Sub ...
- 关于Solr6.0中solrj使用简单例子
solr6.0的solrJ接口有部分变化,下面列出了简单的使用实例,有需要的朋友可以参考下. package com.ailk.solr6; import java.io.IOException; i ...
- java jsp失效问题--待解决
打印jps错误信息jps -J-Djps.debug=true -J-Djps.printStackTrace=true 未完待续...
- html5 canvas实现图片玻璃碎片特效
今天要为大家带来一款html5 canvas实现的图片玻璃碎片特效.图片以玻璃碎片的形式出现到界面中,然后似玻璃被打碎的效果渐消息.效果图如下: 在线预览 源码下载 实现代码: html代码: & ...
- thrift与protobuffer的区别
thrift由facebook出品,protobuffer由google出品: 下面对比一下这两个的区别.参考:http://zhidao.baidu.com/link?url=yNLBeHhWokf ...