vue 动态设置背景图片，并设置背景图片的渐变色

川长思鸟来 2023-10-13 20:41 12阅读 0赞

一、VUE动态设置背景图片

<template v-for="(item,index) in menu">
    	<div :key="item.id"
    	:style="{backgroundImage:'url('+itemImg(item)+')'}">
    	</div>
    </template>

二、静态图片引入方式

<div class="indexWrap" :style="{backgroundImage:'linear-gradient(to right, rgba(255,255,255,0.9), rgba(255,255,255,0)),url(' + require('@/assets/images/zcpd.png') + ')'}">
    </div>
    
    <style>
        
    .indexWrap {
      background-size: 100% 100%;
      float: right;
      height: 80%;
      width: 40%;
      position:absolute;
      bottom:0;
      right:0;
      z-index: 0;
      overflow:visible;
    }
    </style>

三、设置背景图片渐变

:style="{backgroundImage:'linear-gradient(to right, rgba(255,255,255,0.9), rgba(255,255,255,0)),url(' + item.matImg + ')'}"
    
    rgba(255,255,255,0.9)含义
    前三个数字表示颜色，第四个数字表示透明度
    
    to right 表示从右向左

四、如何将背景图片设置在右下角

<div style="position:relative;">
         <div class="indexWrap" :style="{backgroundImage:'linear-gradient(to right, rgba(255,255,255,0.9), rgba(255,255,255,0)),url(' + item.matImg + ')'}">
         </div>
    </div>
    
    .indexWrap {
      background-size: 100% 100%;
      float: right;
      height: 80%;
      width: 40%;
      position:absolute;
      bottom:0;
      right:0;
      z-index: 0;
      overflow:visible;
    }

采用绝对定位和相对定位解决问题

父div使用position:relative解决，子div使用position:absolute属性；

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 动态设置背景图片，并设置背景图片的渐变色

一、VUE动态设置背景图片 <template v-for="(item,index) in menu"> <div :key="item.id"

川长思鸟来/ 2023年10月13日 20:41/ 0 赞/ 13 阅读

相关 Vue 设置背景图片样式

Vue 设置背景图片样式 CSS 效果图 CSS <style> body{ background-image: url

川长思鸟来/ 2023年07月23日 08:56/ 0 赞/ 114 阅读

相关背景渐变色

background: linear-gradient( 90deg, \0a5f97 0%, rgba(141, 228, 255, 0.08)

蔚落/ 2022年12月27日 01:53/ 0 赞/ 161 阅读

相关 treewidget设置背景图片

//::item表示QTreeWidget的item //所有的QTreeWidget this->setStyleSheet("QTr

男娘i/ 2022年08月03日 00:09/ 0 赞/ 294 阅读

相关 MFC设置背景图片

我创建的是基于对话框的MFC程序，父类是CDialogEx类一句就搞定了 CDialogEx::SetBackgroundImage(IDB_BITMA

素颜马尾好姑娘i/ 2022年08月02日 14:52/ 0 赞/ 296 阅读

相关 Qt 设置背景图片

1. QLabel QPixmap pixmap("background.png"); setPixmap(pixmap);

逃离我推掉我的手/ 2022年05月26日 07:39/ 0 赞/ 369 阅读

相关 IDEA设置背景图片

来先看看效果啊 ![70][] 漂亮嘛! 是美女当然漂亮咯! 怎么设置呢? 下面来教大家! 1.先下载安装Background Image Plus

痛定思痛。/ 2022年05月17日 10:59/ 0 赞/ 358 阅读

相关 Pycharm设置背景图片

打开Pycharm点击左上角File如图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib

╰半橙微兮°/ 2021年12月17日 11:55/ 0 赞/ 416 阅读

相关 uni-app 背景图片动态设置

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

痛定思痛。/ 2021年11月17日 00:18/ 0 赞/ 1679 阅读

相关背景图片设置属性

background-size有3个属性： auto：当使用该属性的时候，背景图片将保持100% 的大小显示，不进行任何缩放。超过div的多余部分将被隐藏。当图片过小时，图片

心已赠人/ 2021年09月19日 03:06/ 0 赞/ 526 阅读