vue中设置全屏背景

在Vue项目开发中，有时候我们要向页面中添加一些背景图片，可是当我们在样式中添加了背景图片，编译打包后，配置到服务器上时，由于路径解析的问题，图片并不能够正确的显示出来，列如下面的CSS样式就会出现报错：

background:url("../../assets/image/laosiji.jpg");

在node中有一种解决这个问题的方式，如下：
（1）在template中我们先这样写上：

<div :style="bgImg">

（2）我们需要在data中定义：

<template><div :style="bgImg"></div>
</template><script>
export default {data:function(){return {bgImg: {backgroundImage: "url(" + require("../../static/img/beijing.jpg")+")",backgroundRepeat: "no-repeat",backgroundSize: '100% auto'},}},}
</script><style></style>

ok ,搞定！！！
可复制拿去用，图片路径自己改改，不客气~

图片不是全屏的话试试下面这个方法,绑定class 然后进行style样式更改

<template><div :style="bgImg" class="img1"></div>
</template>

style样式：

<style>
.img1{height: 100%;    width: 100%},</style>

这样就完成啦！！！

vue中设置全屏背景相关推荐

Vue项目设置全屏背景图片上方有白边的问题
今天在Vue框架下写一个登录页面想弄个全屏的背景,添加完背景图片之后发现上方有一个小小的白边,并且添加完成之后整个页面是可以稍微上下滑动的,非常的不美观. 就是这个非常小的白边,让整个页面都可以滑动 ...
如何在thymeleaf模板中设置全屏背景图
首先设置body的style属性 <body th:style="'background-image: url(/images/background.jpg)'"> 注 ...
小程序中设置全屏背景图
page {overflow:hidden;position:fixed;background-image:url('https://qk.taiqiedu.com/bg/newword/bginfo ...
wordpress 背景_如何在WordPress中添加全屏背景图片
wordpress 背景 Full screen background image seems to be a new design trend that is becoming fashionabl ...
php网页全屏背景图代码,HTML5 body设置全屏背景图片的示例代码
用什么代码实现?不允许有白色底色产生,因为手机高度不一样设计图要标准(750)确认是背景图(通屏底图)应用场景:移动端宣传页面或者活动页面错误的写法:加到div中结合图片设置min-height, ...
css样式里把背景设置为图片,利用css如何设置全屏背景图片
利用css如何设置全屏背景图片如果你有一张比较绚烂的图片想做背景,可以这样设置,就跟随百分网小编一起去了解下吧,想了解更多相关信息请持续关注我们应届毕业生考试网! 代码如下: body{ backg ...
css 全屏显示一张图片_css如何设置全屏背景图片
css如何设置全屏背景图片导语:网页背景设置倒不是很难,但是要全屏可控制呢?你还觉得容易吗?以下的是百分网小编为大家搜集的用css设置全屏背景图片的实例,希望对你有所帮助. 如果你有一张比较绚烂的图 ...
在ubuntu20.04中设置锁屏背景（亲测有效）
在ubuntu20.04中设置锁屏背景 1.新建文件夹打开终端输入: cd ~ mkdir software cd software/ mkdir images 在根目录创建一个software文 ...
1_web_设置全屏背景
web_设置全屏背景第一次写web的博客,以后博客里就会出现各种各样的博客了希望自己的技术能够更上一层楼登鹳雀楼王之涣白日依山尽,黄河入海流. 欲穷千里目,更上一层楼. 望岳杜甫岱宗夫如 ...

vue中设置全屏背景

vue中设置全屏背景相关推荐

最新文章

热门文章