vue组件中设置背景图片，随着页面高度的增加，背景图片能够不断延伸铺满屏幕

在做项目的时候，想要实现背景图片将整个页面铺满，等内容变多，高度超过屏幕高度的时候，背景图片仍然能够完全铺满。

第一种方式：（不是想要的）

第一种情况就是最外层设置一个div盒子，宽度100%，高度100vh。高度100vh，也就是占整个屏幕高度的100%。然后将图片设置成背景图片。背景图片设置100%的高度和宽度。
但是这种方式，它的高度就永远都是屏幕的高度，当屏幕右边出现滚条的时候，拉动，下面那一部分就是没有背景图片的

第二种方式：（不是想要的）

就是给高度设置auto。auto就是通过盒子里面的东西给盒子撑起高度。这个方式只能适用于，页面最开始就有右边就有滚条，盒子的高度最开始就已经有屏幕的高度了，或者已经超过屏幕的高度。如果页面最开始高度就没有整个页面的高度，那么在最开始呈现出来的时候，背景图片就是不能够完全铺满的。

**

第三种方式：

**
这种方式就是将上面进行结合，当页面开始超过屏幕高度的时候，就可以让他进行滚动。

vue组件中设置背景图片，随着页面高度的增加，背景图片能够不断延伸铺满屏幕相关推荐

Vue组件中使用canvas实现蜂巢效果的一些尝试
Vue组件中使用canvas实现蜂巢效果的一些尝试前段时间,看到D3.js的官方网站的蜂巢效果,感觉不错,不过一直没有时间去实际的实现下,借这次机会,算是填了前面的坑~~,先来看看d3.js的效 ...
vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
java socket中属性详解_前端开发：关于Vue组件中的data属性值是函数而不是对象的详解...
最近在搞关于前端开发的基础知识归纳,发现了不少经典知识点,那么本篇博文就来分享一个经典的知识点:Vue组件中的data属性值为什么是函数而不是对象.首先来了解一下Vue组件的使用理念:在Vue组件使用 ...
如何在vue项目中设置首页
如何在vue项目中设置首页 1.首先创建一个vue为后缀名的文件,最好在新建的文件夹下面创建,如下图所示: 说明:一般我们的主要页面代码都是写在vue 项目中的这个src文件夹下,项目中所会引用到的组 ...
vue组件中props与data的结合使用
如前所述(vue组件属性(props)及私有数据data),vue组件中,props是组件公有属性,对外:data是组件的私有数据,对内.正因为props对外,由外部赋值,因此在组件内部,是只读的,即 ...
在 vue 组件中查看 vuex 定义
原文:在 vue 组件中查看 vuex 定义在进行 vue 项目开发的时,如果项目中用到了 vuex 做状态管理,经常需要查看 store 里面定义的状态属性.但是在 vue 组件中引用这些 vue ...
Vue笔记——Vue组件中引入jQuery
Vue笔记--Vue组件中引入jQuery 如果想在普通的HTML页面引入jQuer库的话,直接使用<script src="jQuery.js"></scrip ...
在vue项目中设置网站图标
怎么在我们的Vue项目中设置自定义的网站图标: 首先我们需要先制作个ico图标,大小为32*32的,放到static文件夹下,附制作网站,我们把制作好的ico图片改名为:favicon.ico(注:必 ...
为什么HTML左边栏被挤到右边,为什么我的侧边导航栏设置position：fixed后，右边的内容全部跑到左边来了，怎么解决，我目的是让侧边栏背景颜色跟随页面高度...
源自:4-1 编程挑战为什么我的侧边导航栏设置position:fixed后,右边的内容全部跑到左边来了,怎么解决,我目的是让侧边栏背景颜色跟随页面高度某管理系统 body{ margin-top ...

vue组件中设置背景图片，随着页面高度的增加，背景图片能够不断延伸铺满屏幕

第一种方式：（不是想要的）

第二种方式：（不是想要的）

第三种方式：

vue组件中设置背景图片，随着页面高度的增加，背景图片能够不断延伸铺满屏幕相关推荐

最新文章

热门文章