在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颜色)。
 

相关推荐

  1. CSS背景设置——变色和放射渐变

    2023-12-28 17:04:03       28 阅读
  2. android xml 定义变色背景

    2023-12-28 17:04:03       7 阅读
  3. css设置背景 路径带括号 显示问题

    2023-12-28 17:04:03       42 阅读
  4. Js使用ffmpeg视频合成音频背景音乐

    2023-12-28 17:04:03       46 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-28 17:04:03       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-28 17:04:03       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-28 17:04:03       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-28 17:04:03       18 阅读

热门阅读

  1. centos 扩充swap分区

    2023-12-28 17:04:03       37 阅读
  2. CentOS上安装MySQL 8.0的详细教程

    2023-12-28 17:04:03       34 阅读
  3. centos 安装 配置 zsh

    2023-12-28 17:04:03       46 阅读
  4. mysql-5.6.16的内存泄漏问题

    2023-12-28 17:04:03       43 阅读
  5. CMSIS-RTOS2 函数

    2023-12-28 17:04:03       33 阅读
  6. 复试 || 就业day01(2023.12.27)算法篇

    2023-12-28 17:04:03       28 阅读
  7. Linux telnet命令

    2023-12-28 17:04:03       31 阅读
  8. ROS2 相对于 ROS1 做了哪些改动、有什么不同点

    2023-12-28 17:04:03       31 阅读