背景图片全屏拉伸显示

将图片设置为背景图有两种方式，一种是用`<img>`标签，一种是用css的background-image:url("");样式

1.利用`<img>`标签设置背景图全显示，且自适应屏幕

代码：HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link href="img.css" rel="stylesheet">
</head>
<body style="margin: 0"><div class="bac" ><p class="col">500</p><div class="mid" ><img src="1.png" class="im"><label class="fo">返回首页</label></div></div><div id="div1"><img src="2.png"></div>
</body>
</html>

css：

.mid {width: 100px;height: 20px;background-color: blue;margin-left: auto;margin-right: auto;
}
.im{width:10px;height:10px;
}
.col {font-size: 80px;color: gold;text-align: center;margin-top: 70px;
}
.fo{color: #FFFFFF;overflow:hidden;
}
.bac
{margin:0;padding:0;width:100%;height:100%;
}<!--将图片外部的div的位置设置为fixed，使得图片不占有原来的位置；将上下左右设置为0，将图片铺满屏幕（前提是img的宽和高都是100%）；将z-index设置为-1，就是将图片设置在最底层-->
div#div1{position:fixed;top:0;left:0;bottom:0;right:0;z-index:-1;
}
div#div1 > img {height:100%;width:100%;border:0;
}

结果：

2.利用background-image：url("")样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>IMG</title><style>.mid {width: 100px;height: 20px;background-color: blue;margin-left: auto;margin-right: auto;}.im{width:10px;height:10px;/*h*/}.col {font-size: 80px;color: gold;text-align: center;margin-top: 70px;}.fo{color: #FFFFFF;overflow:hidden;}.bac{margin:0;padding:0;width:100%;height:100%;}</style>
</head>
<!--background-size: cover;样式的作用是图片铺满背景，-->
<body style="background:url('2.png') no-repeat;background-size: cover;">
<div class="bac" ><p class="col">500</p><div class="mid" ><img src="1.png" class="im"><label class="fo">返回首页</label></div>
</div>
</body>
</html>

背景图片全屏拉伸显示相关推荐

css禁止背景图拉伸_html-css控制背景图全屏拉伸不重复显示
在HTML中,当我们设置背景图,只能采用是否重叠.居中.重叠方向这几个选项 CSS3中设置 body { background:#3d71b8 url(../back_main.png); backg ...
css 全屏显示一张图片_css3背景图片全屏显示的例子
背景图片全屏这个功能只需要定义重复即可解决了当然这个是有一些技巧了,下面我们就来看一篇关于css3背景图片全屏显示例子了,具体的如下所示. 如何用css背景图片拉伸以及100% 满屏显示呢?这个问题 ...
微信小程序背景图片全屏显示
微信小程序背景图片全屏显示很多人在写小程序界面的时候希望背景图片是全屏覆盖显示的(包括顶部导航栏,如下图),那该如何实现呢? 以下是实现代码: wxml代码: <view class=&quo ...
完美的css背景图片全屏显示，能比例缩小，不留空白
简介:完美的css背景图片全屏显示,能比例缩小,不留空白,我们之前已经知道了可调整大小的背景图片的概念.但是读者DougShults发给了我一个链接,其中使用了非常酷的技术,我觉得这种技术要比之前的任 ...
css背景图片全屏显示加居中显示
css背景图片全屏显示加居中显示,屏幕过大平铺屏幕过小居中裁剪 div { background:url(/i/bg_flower.gif); background-size:cover; -moz ...
uniapp 背景图片全屏显示在整个页面
要让uniapp中的背景图片全屏,可以在<style>标签中添加以下样式: page {background-image: url('/static/bg.jpg');background ...
CSS：实现background-image背景图片全屏铺满自适应
body {/* 加载背景图 */background-image: url(images/bg.jpg);/* 背景图垂直.水平均居中 */background-position: center c ...
html加入图片如何自动平铺,html怎么设置背景图片全屏平铺？
html怎么设置背景图片全屏平铺? 1.新建一个html文档. 2.设置一下HTML的框架,然后把图片设置在同一个文件夹里面. 3.加入,这样可以有样式设置. 4.因为背景设置在主体,所以还要定义为b ...
html怎么设置背景图一张图平铺,html怎么设置背景图片全屏平铺？_WEB前端开发...
ps画笔工具快捷键是什么?_WEB前端开发 ps画笔工具的快捷键是"B":默认使用前景色绘图,通过设置后可以多种色彩一起绘制.ps的画笔分为了4类:常规画笔.干介质画笔.湿介质画笔 ...

背景图片全屏拉伸显示

将图片设置为背景图有两种方式，一种是用`<img>`标签，一种是用css的background-image:url("");样式

1.利用`<img>`标签设置背景图全显示，且自适应屏幕

2.利用background-image：url("")样式

背景图片全屏拉伸显示相关推荐

最新文章

热门文章

背景图片全屏拉伸显示

将图片设置为背景图有两种方式，一种是用<img>标签，一种是用css的background-image:url("");样式

1.利用<img>标签设置背景图全显示，且自适应屏幕

2.利用background-image：url("")样式

背景图片全屏拉伸显示相关推荐

最新文章

热门文章

将图片设置为背景图有两种方式，一种是用`<img>`标签，一种是用css的background-image:url("");样式

1.利用`<img>`标签设置背景图全显示，且自适应屏幕