首页前端知识 Vue设置背景图片

Vue设置背景图片

2024-05-12 17:05:25 前端知识前端哥 589 464 我要收藏

第一种：是用前端的静态图片做背景：

只需要在外层div中加入

<div :style="conTop"> <div>

这个style的内容写在data中

 // Your script here
export default {
  data() {
    return {
      login: {
        backgroundImage: 'url(' + require('@/assets/img/background.jpg') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%',
      },复制

一定是要加require包裹路径

  
<style scoped>
.page-background {
  background-image: url('./'); /* 替换为你的图片路径 */
  background-size: cover; /* 背景图片覆盖整个元素 */
  background-position: center; /* 背景图片居中 */
  background-repeat: no-repeat; /* 不重复背景图片 */
  height: 100vh; /* 可以根据需要设置高度 */
  width: 100%; /* 可以根据需要设置宽度 */
}
</style>复制

2024-08-27 09:08:17

2024-05-09 11:05:34

2024-06-06 10:06:47

2024-04-22 09:04:34

2024-03-29 15:03:20

2024-04-20 17:04:38

2024-05-10 08:05:15

2024-10-30 21:10:12

2024-11-10 09:11:04

2024-11-10 09:11:50

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

Vue设置背景图片

	// Your script here
	export default {
	data() {
	return {
	login: {
	backgroundImage: 'url(' + require('@/assets/img/background.jpg') + ')',
	backgroundRepeat: 'no-repeat',
	backgroundSize: '100% 100%',
	},


	<style scoped>
	.page-background {
	background-image: url('./'); /* 替换为你的图片路径 */
	background-size: cover; /* 背景图片覆盖整个元素 */
	background-position: center; /* 背景图片居中 */
	background-repeat: no-repeat; /* 不重复背景图片 */
	height: 100vh; /* 可以根据需要设置高度 */
	width: 100%; /* 可以根据需要设置宽度 */
	}
	</style>

Vue设置背景图片

微信扫一扫：分享