css 背景图铺满整个屏幕无滚动条

kk总结了两种方式实现背景图铺满整个屏幕并且无滚动出现的方式，下面来一一介绍：

方法一：

先上个效果图

html页面：一个用来放背景图的容器.bg

<body>
    <div class="main">
        <div class="bg"></div>
    </div>
<script>

style样式：.bg的样式

<style>
    body{margin:0;padding:0;}div.bg{/*方法一*/
        position:fixed;top:0;left:0;/*以上三句是让整个span放在屏幕的最左上方*/
        width:100%;height:100%;/*以上两句实现全屏大小*/
        background:url('img/banner01.jpg') no-repeat center 0;/*引入背景图，不重复出现*/
        background-size:cover;/*图片随屏幕大小同步缩放,但是图片画面可能只显示一部分*/
    }</style>

方法二：

效果图：

这个显示简直完美！

style样式如下：

<style>
    body{margin:0;padding:0;}div.bg{width: 100%;height:100vh;background:url("img/banner01.jpg") no-repeat    ;background-size:100% 100%; /*随着原始比例缩放*/

    }</style>

注：vh:表示显示窗口的高度，设置了100vh后，div.bg的高度会随着窗口的大小改变儿变化；

今天先到这里啦，各位大神有什么别的更好的方法，欢迎一起讨论哦！

css 背景图铺满整个屏幕无滚动条相关推荐

css背景图铺满整个屏幕
pc端: h5端 : min-height:100vh; 当页面内容不够一屏时,使背景图至少铺满一个屏幕的高度: background加颜色是为了避免页面内容过长,背景图无法铺满,加与背景图相似的颜 ...
css背景图铺满盒子
背景图片铺满整个盒子大小 uniapp-H5 .wrapper {background: url(/static/sorry.png) no-repeat center center; backgro ...
小程序背景图铺满整个屏幕
vxml: <view style='width:100%;min-height:100%;background-image:url("/images/tlbc_bg.png" ...
背景图铺满屏幕的方法
背景图铺满屏幕的方法 1. 第一种:先获得bitmap,然后再利用这个bitmap,使用createscaledbitmap进行缩放,其中的参数是希望得到的位图的尺寸代码如下所示: //获得位图的 ...
html铺满整个页面_html 怎么让背景图铺满整个页面？
html中,怎么让背景图片充满整个页面 html 怎么让背景图铺满整个页面雨声潺潺,像住在溪边.宁愿天天下雨,以为你是因为下雨而不来. 也就是一张网页内容有多长多宽,那一张背景图就要放大到那么大,例如 ...
html让背景图铺满整个页面
html让背景图铺满整个页面 <style> body {background:url("zz.jpeg") no-repeat center center; /*加载 ...
利用css将背景图片铺满整个屏幕
方法一: <!DOCTYPE html> <html><head><meta charset="UTF-8"><meta ht ...
html 怎么让背景图铺满整个页面
为了让背景图片铺满整个页面,我们可以这样设置: 第一.页面只有屏幕大小: background: url(../images/banner.jpg) no-repeat;background-size ...
网页背景图片铺满手机屏幕
主要用于网页端开发页面,图片需要适应手机屏幕大小的场景(但是不推荐手机和PC端使用一套前端) 一效果图二代码 <!DOCTYPE html> <html> <hea ...

css 背景图铺满整个屏幕无滚动条

css 背景图铺满整个屏幕无滚动条相关推荐

最新文章

热门文章