如何给Vue页面添加背景图片

最新推荐文章于 2024-04-18 15:26:45 发布
最新推荐文章于 2024-04-18 15:26:45 发布
阅读量2.9w 收藏 54
点赞数 21
分类专栏： Solve 文章标签： css js html vue
原文链接：https://www.cnblogs.com/qxxblogs/p/12388482.html
版权

1、首先准备一个div

<div id="background"></div>

2、编写css

#login {
  background: url("../assets/images/content.jpg") no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}

3.大功造成

JavaStudyha
关注
  • 21
    点赞
  • 踩
  • 54
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
专栏目录
Vue项目中设置背景图片方法
01-21
在Vue项目开发中我们经常要向页面中添加背景图片，可是当我们在样式中添加了背景图片后，编译打包后，配置到服务器上时，由于路径解析的问题，图片并不能够正确的显示出来，如下CSS样式： background:url(../../assets/head.jpg); 这个时候我们就要考虑使用其他的方式了，node中提供了一种比较有效的方式来解决这个问题： 1、在data中定义如下： export default { name: 'productdetailspage', data() { return { note: { backgroundImage: url( +
使用Vue-cli 中为单独页面设置背景图片铺满全屏
10-15
主要介绍了使用Vue-cli 中为单独页面设置背景图片铺满全屏，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 页面背景图
weixin_44446127的博客
03-20 228
【代码】【无标题】
Vue中给登录页面设置背景图片
qq_46028438的博客
10-04 2519
2、在组件的样式部分，添加设置背景图片的CSS样式。可以使用background-image属性来设置背景图片，下面代码给名为login-container的元素设置了背景图片，并通过background-size: cover;确保背景图片覆盖整个元素并保持比例。我的背景图片位于Vue项目的src/assets目录下，logo组件在View模块的login文件下，因此我的图片路径为…1、在Vue项目的组件中，找到对应登录页面的组件文件。3、在登录页面的模板部分，将设置了背景图片的样式应用到相应的元素上。
vue项目中加入图片和背景图：img、background-image
m0_72822997的博客
02-21 1335
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。原文链接：https://blog.csdn.net/qq_49097495/article/details/131622042。/*以下两种路径方式都可以*/二、img直接引入图片。第一种方式：推荐使用。
vue 动态绑定背景图片
热门推荐
我叫陈小皮。
05-09 5万+
backgroundImage &amp;&amp; 三目运算符 &lt;div class="right-con" :style="{backgroundImage: 'url(' + (coverImgUrl ? coverImgUrl : baseImg) + ')', backgroundSize:'contain'}"&gt; &lt;/div&gt; backgroundI...
简单的网页背景滚动视觉差特效
12-11
这是一款简单的网页背景滚动视觉差特效。该背景视觉差特效使用几句简单javascript语句即可完成，在页面滚动时，背景图片和网页元素可以形成滚动视觉差效果。
在vue中设置背景图片
Bakertt的博客
03-30 5万+
在vue中设置背景图片 在App.vue中将样式中默认的margin-top 改为0，使得页面顶部不留白 `#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 0px; }`
vue设置页面背景及背景图片
u013302168的博客
11-29 1万+
【代码】vue设置页面背景及背景图片。
CSS图片视觉差效果
QSWの
05-14 688
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do
vue2实现的落日余晖登录页+滑块校验
05-16
用vue2实现的一个登录页demo， 背景图可直接替换，成品案例直接可运行 设计技术： vue2、element-ui、vue-router、滑块校验 安装包 npm install 开发运行 npm run serve 编译运行 npm run build 代码解读： 需要注意的是，由于该方法只会在login.vue组件中生效，因此如果其他组件也需要相同的背景图效果，需要分别在这些组件中添加相应的样式。 一个名为background的CSS类，并设置了背景图、大小、位置、重复方式和高度等属性，你可以完全自定义。 在Vue.js应用程序中实现让login.vue页面有一个全局的背景图了。需要注意的是，由于全局样式会作用于整个应用程序，因此在设计样式时要注意不要影响到其他页面。 一定要注意body标签，这个标签默认是有 margin:8px 导致后续页面可能有白边，所以要注意处理一下，后续会有对应的文章进行详细的介绍，欢迎看我主页进行查找。
基于 vue 编写的vue图片预览组件，支持单图和多图预览，仅传入一个图片地址，即可实现图片预览效果，可自定义背景、按钮颜色等
01-03
本组件是一个基于 vue 编写的vue图片预览组件，支持单图和多图预览，仅传入一个图片地址，即可实现图片预览效果，比较适合给文章及页面的所有图片添加预览效果，预览背景色，关闭按钮颜色，控制条的背景也和字体颜色都可自定义，兼容 ie9+，火狐，Safari，谷歌浏览器，支持多图预览。
前端工程化–Vue-CLI自动生成页面
01-08
文章目录背景自动生成页面一、生成表格页1. 编辑配置文件2. 按照配置文件生成页面`.vue`文件3. 添加路由二、生成空白页 背景 我们的项目是基于vue-cli搭建的，每次需要新加一个页面需要操作以下步骤： 在views文件夹下面新建一个文件夹，用来存放新页面的.vue文件。 需要在routes.js文件里面新添加一个路由。 按照上述操作以后，才可以正常访问新添加的页面，之后才开始对新页面进行正常开发。但是这样的机械化步骤我们完全可以用代码帮我们执行，更进一步，对于一些简单的页面，我们甚至可以一键生成页面，包括从后端请求数据等操作。 接下来我就一步步讲一下怎么样自动生成页面。 自动生成页面
Vue登录主页动态背景短视频制作
12-30
本文实例为大家分享了Vue制作登录主页动态背景短视频的具体代码，供大家参考，具体内容如下 一、HTML代码 注：src的路径根据自己的需要改变； video标签无法自动播放 刷新后无法自动播放； 解决方法：给video标签添加muted属性，可写为muted或完整写法：muted=“muted” <div :style
图片上添加文字的两种常用方式
09-25
图片上添加文字，常用的方式：将一张图片设置为背景，然后在里面加文字；加span标签，设置css样式；下面为大家介绍下
超强的IE背景图片闪烁(抖动)的解决办法
01-19
很多人都遇到过在页面部分操作中IE背景图片重新加载而导致页面闪动的bug，那么如何解决它呢？ 在国外某blog上看到一解决办法： 添加如下脚本即可： document.execCommand(“BackgroundImageCache”, false, true) ...
CSS显示模式
最新发布
小何代码咖啡馆
04-18 964
元素显示模式就是元素（标签）以什么方式进行显示，比如自己占一行，比如一行可以放多个。当网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局网页。
CSS简介与CSS选择器
小何代码咖啡馆
04-17 974
CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称，有时我们也会称之为 CSS 样式表或级联样式表。CSS 是也是一种标记语言，CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。
vue单个页面设置背景图片
05-01
要在Vue单个页面设置背景图片，有几种方法可以实现。 第一种方法是通过CSS样式设置背景图片。在你的Vue组件中的<style>标签中，你可以使用background-image属性来定义背景图片的路径。例如： ``` <style> .container { background-image: url(../assets/background.png); ... } </style> <template> <div class="container"> ... </div> </template> ``` 这将在你的组件中创建一个类名为“container”的容器，并将背景图片设置为“background.png”。 第二种方法是使用Vue的背景绑定指令。在组件中，你可以使用v-bind:style指令将背景图片绑定到一个Vue变量上，如下所示： ``` <template> <div v-bind:style="{ backgroundImage: 'url(' + backgroundImageUrl + ')' }"> ... </div> </template> <script> export default { data() { return { backgroundImageUrl: "../assets/background.png" } } } </script> ``` 在这个例子中，我们使用v-bind:style指令将背景图片绑定到backgroundImageUrl变量，然后将其插入到style属性中作为CSS样式的一部分。 第三种方法是使用vue-cover插件。这是一个Vue插件，它提供了一种简单的方法来设置背景图片。你只需在组件中导入它，然后使用一个<cover>标签来包含你的组件中的内容，如下所示： ``` <template> <cover src="../assets/background.png"> <div> ... </div> </cover> </template> <script> import Cover from 'vue-cover' export default { components: { Cover } } </script> ``` 在这个例子中，我们导入了vue-cover插件，并将其添加到组件的components对象中。然后我们使用<cover>标签去包裹我们的组件内容，并将背景图片的路径传递给它的src属性。 这是三种在Vue单个页面设置背景图片的方法，你可以根据你的需求选择其中一个。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值