VUE.js插入背景图片

最新推荐文章于 2024-05-16 21:25:35 发布
最新推荐文章于 2024-05-16 21:25:35 发布
阅读量1.8k 收藏 3
点赞数
分类专栏： 前端 文章标签： CSS样式 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TGBTrial/article/details/100567889
版权

如果你有一个文件夹的图片…

你可以选择将文件夹拉到static文件夹下（弹出框点击Copy Folder）：
在这里插入图片描述

添加CSS样式

在你想要添加背景的.vue文件中添加CSS样式和与之对应的html代码（随便拿个文件举例了）：
在这里插入图片描述

关于html中图片的路径问题

在文件夹中选中你喜爱的图片，右击选择复制相对路径：
在这里插入图片描述

这样以后打开终端运行就可以看到效果了

bit&y
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue.js多张图片上传
02-14
vue.js多张图片上传，适合初学者学习很详细，很有用，有收获。
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
10-18
在这里，`htmlData`是你从后台获取的HTML字符串数据，Vue.js会将`htmlData`的内容作为HTML插入到`<span>`元素内。需要注意的是，使用`v-html`时，Vue.js不会执行任何数据绑定或事件监听器，它只会简单地将HTML字符串...
在Vue中实现全屏背景图片
lplovewjm的博客
05-28 5950
可以使用absolute或relative，然后height设置成auto自动
Web前端最全vue3的three场景加入背景图_vue3 threejs scene 设置背景图片(2)，2024年最新阿里三面通过然后一直等
最新发布
2301_82244279的博客
05-16 495
推荐一些系统学习的途径和方法。每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】HTML 和 CSS：setup () {})//1.创建场景//场景创建背景色//2.创建相机//设置相机位置//3.定义材质贴图。
javascript添加背景图片
男儿当自强
09-21 1万+
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here function backImage(){ document.body.style.backgroundImage="URL(ph/1.jpg)"; document.
vue添加背景图片
weixin_36998547的博客
04-22 2106
1.src下新建文件夹images用于存放将要引入的背景图片 2.样式代码： background-image: url("../../images/1.jpg"); background-repeat: no-repeat; background-size: 100% 100%; height: 100%; ...
vue项目中加入图片和背景图：img、background-image
m0_72822997的博客
02-21 3751
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。原文链接：https://blog.csdn.net/qq_49097495/article/details/131622042。/*以下两种路径方式都可以*/二、img直接引入图片。第一种方式：推荐使用。
Vue.js——登录界面实现插入背景
FranzLiszt的博客
10-08 7929
登录界面实现插入背景效果图插入背景图片样式引用登录实现引入Element UI通过npm安装通过引入样式库实现双向绑定账号密码设置点击事件尾言 效果图 插入背景图片 样式 制作样式 因为我顶部设置了导航栏，所有高度只设置了85% .background_style{ width:100%; height:85%; position:fixed; background-size:100% 100%; background-repeat: no-repeat; background-image: url(".
vue.js添加待办事项样式特效
06-24
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面，尤其在构建单页应用程序（SPA）方面表现出色。在这个项目中，“vue.js添加待办事项样式特效”是关于利用Vue.js来实现一个具有动态样式和交互效果的待...
vue.js通过路由实现经典的三栏布局实例代码
10-18
Vue.js 是一个流行的前端JavaScript框架，它提供了丰富的功能来构建用户界面。在本文中，我们将探讨如何使用Vue.js的路由功能实现经典的三栏布局。这种布局通常包括一个头部、一个侧边栏和一个主要内容区域，它们...
履历表：我的履历表由Vue.js实现
02-15
Vue.js是一种流行的、轻量级的前端JavaScript框架，用于构建用户界面。它的核心特性包括声明式渲染、组件化、响应式数据绑定以及易于上手的学习曲线。在"履历表：我的履历表由Vue.js实现"这个项目中，开发者使用Vue....
前端面试题vue，css.,javascript
02-02
### 前端面试知识点详解 ...以上内容涵盖了前端开发中较为重要的几个方面，包括 Vue.js、CSS 和 JavaScript 的核心概念和技术点。对于前端开发者而言，掌握这些知识点有助于提升项目开发效率和质量。
JS中如何设置背景图片？
08-29 4232
方法一： 　　 预先设置好一个样式，当用到的时候，只需要给这个对象添加一个类名就行了。 eg: css中：.bj { background: url(star.jpg) no-repeat center; background-size: cover; } js中： oBox.className = "bj"; 方法二： 直接使用...
vue移动端设置全屏背景
风海洋的博客
05-30 1305
vue移动端项目设置全屏背景，关键是要找对文件，然后添加background属性即可，这里说的全屏背景，是指任意切换页面，背景都还是这个背景，那么只要在入口html文件或者全局vue文件中增加background属性就能达到目的。
vue中设置背景图片的方式
Java_Fly1的博客
07-09 2万+
1、在data中声明背景图片相关配置 export default { data () { return { // 顶部导航背景图片配置 background: { // 背景图片地址 backgroundImage: 'url(' + require('../../../static/img/person/temp1.png') + ')', // 背景图片是否重复 backgroundRepeat: 'no
Vue项目中使用img图片和background背景图的使用方法
总结前端开发中遇到的问题，分享前端知识
09-11 1万+
Vue项目中使用img图片和background背景图的使用
vue中引入图片的方法
qq_37831759的博客
02-20 3993
记录一下vue中引入图片的写法
vue.js div 设置背景图片
热门推荐
hhbbeijing的专栏
08-10 2万+
布局： &lt;div class="middle" :style="backgroundDiv"&gt; &lt;img src="./images/aibtn@3x.png" style="width: auto; height: 40px;"&gt; &lt;/div&gt; 数据： data() { return { backgr
前端如何将数据保存到localStorage
杨光
09-20 1万+
介绍 localStorage用于长久的保存整个网站的数据（string类型存储），保存的数据没有过期时间，直到手动删除，并且localStorage的属性是只读的（不过如果是在浏览器的隐私模式下，它是不可读取的）。 另外，如果你只想将数据保存在当前会话下，可以使用sessionStorage，数据将会临时保存，关闭窗口后则会被删除。 语法 保存数据： localStorage.setItem(...
Vue.js获取返回数据中数组项个数
杨光
09-11 1万+
这是返回给我的数据，我们拿lineList中的数据举例 获取数据： 关于axios的使用，请自行百度，之后这里会添加链接，祝好运~
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值