在uniapp中使用背景渐变色与背景图不生效问题

news/2025/3/2 2:31:13/

list上有文字详情以及背景图,从背景可以看出是渐变色和 背景图片的结合。

因为使用到渐变色,所以要结合 background-blend-mode 属性来实现与背景图片叠加显示,否则只通过 background: linear-gradient(); background-image: url(); 设置不会生效,这样只能显示图片。

 background-repeat: no-repeat;background-size: contain;background-image: linear-gradient(180deg, #02AE81 0%, #01764A 100%),url('../../static/xxxx.png');background-position: right bottom;background-blend-mode: color-burn;

如果背景色不是渐变色,可以直接使用background-color: ; background-image: url();

background-blend-mode 属性定义了元素背景层的混合模式(background-image图片与background-color颜色)。
 


http://www.ppmy.cn/news/1285036.html

相关文章

信息泄露总结

文章目录 一、备份文件下载1.1 网站源码1.2 bak文件泄露1.3 vim缓存1.4 .DS_Store 二、Git泄露2.1 git知识点2.1 log2.2 stash 三、SVN泄露3.1 SVN简介3.2 SVN的文件3.3 SVN利用 四、Hg泄露 一、备份文件下载 1.1 网站源码 常见的网站源码备份文件后缀: tartar.gz…

Matlab实时读取串口数据并实时画图方法

** Matlab实时读取串口数据并实时画图方法 ** 按照数据串口协议如:$KT2,1.80,88.18,39.54,42.86,LO[0.72,-1.04,0.35],举例。 s serialport("COM12",115200,"Timeout",5); poszeros(100000,3); j1; data1 read(s,1,"uint8&…

组合[中等]

一、题目 给定两个整数n和k,返回范围[1, n]中所有可能的k个数的组合。你可以按 任何顺序 返回答案。 示例 1: 输入:n 4, k 2 输出: [ [2,4], [3,4], [2,3], [1,2], [1,3], [1,4], ] 示例 2: 输入:n 1…

PicGo+GitHub搭建免费图床

PicGoGitHub搭建免费图床 步骤 1: 安装 PicGo步骤 2:创建图床仓库步骤 3: 配置 GitHub Token步骤 4: 配置 PicGo步骤 5: 上传图片步骤 6: 访问图片 使用 GitHub 作为图床的优势在于免费、稳定且具有版本控制功能,特别适合个人博客、小型项目等。PicGo作为一个开源的…

一篇文章掌握 NestJS 所有的生命周期以及生命周期的执行时机

前言 NestJS 是一个用于构建高效、可扩展的 Node.js 服务器端应用程序的框架,它使用 TypeScript 作为开发语言,也支持原生的 JavaScript。在 NestJS 中,生命周期事件是一个重要的概念。在我们构建和管理应用程序时,有时需要在特定…

C# Onnx yolov8n forklift detection

目录 效果 模型 项目 代码 下载 C# Onnx yolov8n forklift detection 效果 模型 Model Properties ------------------------- date:2023-12-25T16:22:05.530078 author:Ultralytics task:detect license:AGPL-3.0 https:/…

六、文件操作

文章目录 1.文件的打开与关闭1)打开文件2)关闭文件3)写数据4)读数据(read)5)读数据(readlines)6)读数据(readline)7)获取当前读写的位置8&#xf…

05-C++ 类和对象-继承

类与对象-03 继承与派生 1. 继承的概念 c最重要的特征是代码重用,通过继承机制可以利用已有的数据类型,来定义新的数据类型,新的类不仅拥有旧类的成员,还拥有新定义的成员。 一个 B 类继承于 A 类,或称从类 A 派生…