css引入背景图，子页面接收父页面背景图

最新推荐文章于 2024-02-29 06:24:39 发布

花笙_

最新推荐文章于 2024-02-29 06:24:39 发布

阅读量215

点赞数

分类专栏： css 文章标签： css 前端

本文链接：https://blog.csdn.net/wang_59881/article/details/132097629

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

css引入背景图
方法一：使用background属性

<div class="bg"></div>

.bg{
	// 绝对路径 ~@必不可少
	background: url("~@/assets/home/product1.png") no-repeat center center;
	// 相对路径
	background: url("../../assets/home/product1.png") no-repeat center center;
}

方法二：使用img标签

<img src="@/assets/home/partners1.png" alt="">
或者
<img :src="require(`@/assets/home/partners1.png`)" alt="">

方法三：行内标签

import bg from "@/assets/home/partners1.png"

export default {
  data() {
    return {
      bg: bg,
    }
  }
}


<div class="bg" :style="{backgroundImage: 'url(' + bg+ ')' }"></div>

子页面接收父页面背景图
子页面

<template>
	// 行内样式接收父组件传来的数据
    <div class="flex topbg" :style="{background: 'url(' + textInfo.url + ') center center no-repeat' }">
        <div class="cont">
            <div>{{textInfo.name}}</div>
            <div>{{textInfo.enName}}</div>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        textInfo:Object,
        require:true   // 一定要写
    }
}
</script>

父页面

<template>
  <div class="page-about">
    <aboutBg :textInfo="textInfo"/>
  </div>
</template>
<script>
import aboutBg from '@/layout/textbg.vue';

export default {
  components: { 
    aboutBg,
  },
  data(){
    return{
      textInfo:{
        name:'关于我们',
        enName:'ABOUT US',
        url:require('@/assets/about/about1.png')  // 必须要绝对路径
      }
    }
  },
}
</script>
<style lang='less' scoped>
</style>