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

news2025/1/15 7:01:05

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.coloradmin.cn/o/1340889.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

申请sectigo和certum的IP证书注意事项

IP数字证书可以为只有公网IP地址的站点提供网站传输信息加密服务,一方面可以消除用户在浏览器访问网站时的“不安全”提示,另一方面现在主流浏览器会优先收录安装了数字证书的网站,为公网IP地址网站安装IP证书有利于提升网站SEO(搜…

openGauss学习笔记-175 openGauss 数据库运维-备份与恢复-导入数据-管理并发写入操作示例

文章目录 openGauss学习笔记-175 openGauss 数据库运维-备份与恢复-导入数据-管理并发写入操作示例175.1 相同表的INSERT和DELETE并发175.2 相同表的并发INSERT175.3 相同表的并发UPDATE175.4 数据导入和查询的并发 openGauss学习笔记-175 openGauss 数据库运维-备份与恢复-导入…

oracle下载

前言: 官网上提供都是最新的什么19c 21c这些版本,我要的是 11g 12c 或者更老的 8i 9i 这些版本。 准备下载一个oracle12c 版本,但是找了很久,最终…详情请看下面 oracle 数据库版本介绍 Oracle数据库有多个长期支持版本&#x…

万字长文谈自动驾驶bev感知(一)

文章目录 prologuepaper listcamera bev :1. Lift, Splat, Shoot: Encoding Images from Arbitrary Camera Rigs by Implicitly Unprojecting to 3D2. M2BEV: Multi-Camera Joint 3D Detection and Segmentation with Unified Birds-Eye View Representation3. BEVDet: High-Pe…

Android原生实现单选

六年前写的一个控件,一直没有时间总结,趁年底不怎么忙,整理一下之前写过的组件。供大家一起参考学习。废话不多说,先上图。 一、效果图 实现思路使用的是radioGroup加radiobutton组合方式。原理就是通过修改RadioButton 的backgr…

Python遥感影像深度学习指南(5)-使用GEE为图像分割创建训练图像patchs

在遥感影像图像分割训练过程中,有些情况下,我们需要从一开始就准备自己的数据集,而如果没有合适的工具,这可能会很耗时。 1、在GEE中选择影像 首先,我们需要一个 GEE 平台的免费账户,可以在 https://signup.earthengine.google.com/ 上轻松获得。然后,我们将进入代码编…

技术资讯:2023编程语言排行榜,出炉啦!

大家好,我是大澈! 本文约2000字,整篇阅读大约需要4分钟。 感谢关注微信公众号:“程序员大澈”,免费领取"面试礼包"一份,然后免费加入问答群,从此让解决问题的你不再孤单&#xff01…

C# Winform教程(一):MD5加密

1、介绍 在C#中,MD5(Message Digest Algorithm 5)是一种常用的哈希函数,用于将任意长度的数据转换为固定长度的哈希值(通常是128位)。MD5广泛用于校验数据完整性、密码存储等领域。 2、示例 创建MD5加密…

安卓无法下载gradle或者下载gradle只有几十k的时候怎么办

简单说明:检查项目根目录的build.gradle文件,新版本的检查setting.gradle文件,看看repositories中有没有mavenCentral(),没有的话,加上,放在前面,把阿里的镜像也放上maven { url ‘https://mave…

laravel5.8中实现验证码组件的安装和验证

本篇文章主要讲解使用laravel5.8自带的验证码库实现验证码验证的效果教程。通过本教程你可以快速接入到自己的项目中开发相应的验证功能。 作者:任聪聪 (rccblogs.com) 日期:2023年12月17日 实际效果 安装步骤 步骤一、输入命令 composer require mews…

java freemarker 动态生成excel文件

好久木有更新啦 抓住2023的小尾巴 浅浅更新一下吧~ 最近做了一个动态生成excel的功能,这里记录下部分功能,主要用到的是freemarker框架,spring就有带,我起的demo载入了一下freemarker的jar包 一、创建模板 首先可以创建一个e…

MySQL进阶之(一)逻辑架构

一、逻辑架构 1.1 逻辑架构剖析1.1.1 连接层1.1.2 服务层01、基础服务组件02、SQL Interface:SQL 接口03、Parser:解析器04、Optimizer:查询优化器05、Caches & Buffers: 查询缓存组件 1.1.3 引擎层1.1.4 存储层1.1.5 总结 1.…

【JavaEE】多线程(6) -- 定时器的使用及实现

目录 定时器是什么 标准库中的定时器的使用 实现定时器 定时器是什么 Java中的定时器是一种机制,用于在预定时间执行某个任务。它允许开发人员在指定的时间间隔内重复执行任务,或在指定的延迟之后执行任务。定时器是Java提供的一种方便的工具&#xf…

【没有哪个港口是永远的停留~论文简读】HRNet+OCR

一、Deep High-Resolution Representation Learning for Human Pose Estimation (HRNet) 论文:https://arxiv.org/pdf/1902.09212.pdf 代码:https://github.com/leoxiaobin/deep-high-resolution-net.pytorch 二、Deep high-res…

JAVA——JDBC学习

视频连接:https://www.bilibili.com/video/BV1sK411B71e/?spm_id_from333.337.search-card.all.click&vd_source619f8ed6df662d99db4b3673d1d3ddcb 《视频讲解很详细!!推荐》 JDBC(Java DataBase Connectivity Java数据库连…

并行进位加法器

前言 在文章逻辑运算加法器中,介绍了两种加法运算方式,串行进位加法器和进位选择加法器,我们给出了逻辑门的实现并给出了C语言描述,本篇文章介绍另外一种加法计算方法:并行进位加法器 写在前面 使用 ⨁ \bigoplus ⨁…

rime中州韵 symbols.custom.yaml 配置

今天我们所做的配置,将实现扩展符号的输入效果,如下👇: 基础扩展符号的配置 要实现输入法能够输入扩展的符号,我们需要在输入方案中引入扩展符号集。 如果你使用的输入方案是 wubi_pinyin.schema.yaml,…

计算机中找不到vcruntime140.dll无法启动此程序怎么解决?

无法继续执行代码,因为找不到vcruntime140.dll”。那么,vcruntime140.dll是什么文件?它的作用是什么?当它丢失时会对电脑产生什么影响?本文将为您详细介绍vcruntime140.dll文件的相关知识,并提供五种解决vc…

Rhinos各版本安装指南

下载链接 https://pan.baidu.com/s/1L5qeUPMW32d7zR-GlVVZIw?pwd0531 温馨提示:若您下载的安装包与该安装步骤不同,说明您使用的是之前被淘汰的安装包,请通过该页面的下载链接重新下载。 1.鼠标右击【Rhino8.1(64bit)】压缩包&#xff08…

VuePress、VuePress-theme-hope 搭建个人博客 1【快速上手】 —— 防止踩坑篇

vuePress官网地址 👉 首页 | VuePress 手动安装 这一章节会帮助你从头搭建一个简单的 VuePress 文档网站。如果你想在一个现有项目中使用 VuePress 管理文档,从步骤 3 开始。 步骤 1: 创建并进入一个新目录 mkdir vuepress-starter cd vuepress-star…