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

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.mfbz.cn/a/275501.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

关于Redis面试题

前言 之前为了准备面试,收集整理了一些面试题。 本篇文章更新时间2023年12月27日。 最新的内容可以看我的原文:https://www.yuque.com/wfzx/ninzck/cbf0cxkrr6s1kniv Redis 是什么 全名:远程字典服务。这是一个开源的在内存中的数据结构存…

算法测试流程脚本工具站

🍉一、录入sql和批量上传minIo图片, 录入sql(掠过)..., 一个上传,一个下载,只需上传,找到 def upload():# NOTE:Step:3 把拉下来的图片传上去给XXX服务器的minioup_data_minio(&q…

用CHAT写环保为主题的校园实践活动报告

问CHAT:写一篇以环保为主题的校园实践活动报告 CHAT回复:尊敬的老师,亲爱的同学们: 大家好,今天我很荣幸地向大家分享一下,最近我们团队在学校里所组织的环保主题实践活动。 环保是一件至关重要的事情&am…

web自动化(4)——POM设计重构

1. 什么是POM Page Object Model 是ui自动化测试中常见的封装方式。 原理:将页面封装为PO对象,然后通过面向对象的方式实现UI自动化 2. 封装原则 PO无需包含全部UI元素PO应当验证元素PO不应该包含断言PO不应该暴露元素 3. 怎么进行POM封装 面向对象…

Leetcode 763 划分字母区间

题意理解: 要把这个字符串划分为尽可能多的片段,同一字母最多出现在一个片段中。 注意,划分结果需要满足:将所有划分结果按顺序连接,得到的字符串仍然是 s 。 返回一个表示每个字符串片段的长度的列表。 输入&#xff…

大数据与人工智能|信息技术产业架构、行业发展与前沿技术(第2节)

内容链接:信息技术产业架构、行业发展与前沿技术(大数据与人工智能系列课程 第2节) 声明:学习使用,侵权必删! 主要内容:1. 从算盘到量子计算机,介绍了半导体行业的发展历程和技术原…

二分查找——OJ题(一)

📘北尘_:个人主页 🌎个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上,不忘来时的初心 文章目录 一、二分查找1、题目讲解2、算法原理3、代码实现 二、在排序数组中查找元素的第一个和最后一个…

【本地缓存篇】如何实现本地缓存?

如何实现本地缓存? ✔️典型解析✔️数据结构✔️线程安全✔️对象上限✔️清除策略✔️过期时间 ✔️扩展知识仓基于Caffeine实现本地缓存 ✔️典型解析 所谓本地缓存,就是和应用服务器在一起的缓存工具,将需要缓存的数据放到本地缓存中,可…

【轻松入门】OpenCV4.8 + QT5.x开发环境搭建

引言 大家好,今天给大家分享一下最新版本OpenCV4.8 QT5 如何一起配置,完成环境搭建的。 下载OpenCV4.8并解压缩 软件版本支持 CMake3.13 或者以上版本 https://cmake.org/ VS2017专业版或者以上版本 QT5.15.2 OpenCV4.8源码包 https://github.com/op…

常用的 linux 命令

常用的 linux 命令 1.从其他机器拷贝文件夹2.查看哪个程序在用特定端口3.实时监控日志文件内容4.查看指定用户拥有的进程5.查看磁盘空间使用情况6.文件搜索which(whereis) 显示系统命令所在目录find 查找任何文件或目录1) 根据文件名称查找2)…

【Linux驱动】Linux中断(一)—— 设备树中断节点

裸机使用中断需要通过寄存器手动配置,但有了 Linux 系统后,Linux内核提供了完善的中断框架,我们只需要申请中断,然后注册中断服务函数即可。 一、设备树中断属性 既然驱动中要注册中断服务函数,我们首先需要知道三个点…

实战 | 使用OpenCV快速去除文档中的表格线条(步骤 + 源码)

导 读 本文主要介绍如何使用OpenCV快速去除文档中的表格线条,并给详细步骤和代码。 背景介绍 测试图如下,目标是去除下面三张图中的表格线条,方便后续图像处理。 实现步骤 下面演示详细步骤,以图1为例: 【1】获取二值图像:加载图像、转为灰度图、OTSU二值化 i…

记录 | ubuntu源码编译python3.7.3(指定版本)

一、安装依赖包 sudo apt-get install -y make build-essential libssl-dev zlib1g-dev sudo apt-get install -y libbz2-dev libreadline-dev libsqlite3-dev wget curl llvm sudo apt-get install -y libncurses5-dev libncursesw5-dev xz-utils tk-dev 二、从Python网…

mapboxgl 中给地图添加遮罩蒙版,并不遮罩其中一块区域

文章目录 概要效果预览技术思路技术细节小结 概要 本篇文章主要是给一整块地图添加遮罩层蒙版,但是不遮罩其中一个区域,以反向高亮地区内容。 效果预览 技术思路 这里要实现某个区域反显高亮,需要这个区域的边界json文件,与ech…

Flink1.17实战教程(第三篇:时间和窗口)

系列文章目录 Flink1.17实战教程(第一篇:概念、部署、架构) Flink1.17实战教程(第二篇:DataStream API) Flink1.17实战教程(第三篇:时间和窗口) Flink1.17实战教程&…

华锐三维云展平台创建VR文化宣传展厅,让文化传承变得更便捷和高效

随着科技的不断发展,虚拟现实(VR)技术已经逐渐走进人们的生活。通过华锐云展平台,可以通过拖、拉、拽,快速自由地创建一个VR文化宣传展厅,VR文化宣传展厅为人们提供了一个全新的、沉浸式的文化体验空间。在…

uniapp的分包使用记录

UniApp的分包是一种将应用代码划分为多个包的技术。分包的核心思想是将不同部分的代码划分为不同的包,按需加载,从而提高应用性能。使用UniApp的条件编译功能,开发人员可以根据需要将代码划分为多个包。每个包都包含一组页面和组件&#xff0…

在国内如何在Tiktok上买东西(在tiktok上付款)??

TikTok是一款由中国公司字节跳动(ByteDance)开发的社交媒体应用,于2016年9月正式上线。它在全球范围内迅速走红,特别受到年轻用户的喜爱。以下是关于TikTok的介绍以及其一些优势 支持的卡头有5561、531993 //点我办卡&#xff0c…

stm32H743编译器关于浮点类型强制转换传参的bug

局部函数,正常传参 当测试函数作为局部函数和main函数写在同一个文件中时,参数可以正常传递。函数参数和形参都为3.14 float value 0.0; void float_test(float _v) {value _v; }int main(void) {float_test(3.14f);while(1); } keil仿真截图&#…

关于MySQL、分布式系统、SpringCloud面试题

前言 之前为了准备面试,收集整理了一些面试题。 本篇文章更新时间2023年12月27日。 最新的内容可以看我的原文:https://www.yuque.com/wfzx/ninzck/cbf0cxkrr6s1kniv MySQL 索引 说一下有哪些锁? 行锁有哪些? 性能优化 分库分表…
最新文章