修改二维码颜色

m0_52611940

已于 2023-09-06 14:56:07 修改

阅读量330

点赞数

文章标签： javascript 前端 html

于 2023-06-07 14:19:44 首次发布

本文链接：https://blog.csdn.net/m0_52611940/article/details/131086781

版权

文章介绍了在H5页面上使用CSS的mix-blend-mode属性创建二维码上叠加渐变图案的效果，以及遇到的问题和解决方案。当mix-blend-mode不生效时，可能是因为元素缺少position属性或z-index属性。通过添加z-index:5，可以确保混合模式正确显示。文章还列举了mix-blend-mode的各种可选模式。

摘要由CSDN通过智能技术生成

我们只需要两层，原二维码为一层，然后将渐变图案叠加在其之上，并且设置 mix-blend-mode: lighten

		<view class="g-container">
				<image src="../../static/img/icons/qrcode.png" class="qrimg">
			</view>
css
		.g-container {
			margin-top: -54rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 400rpx;
			height: 400rpx;
			&::before {
				position: absolute;
				content: "";
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				background: rgba(255, 154, 0, 1);
				mix-blend-mode: lighten;

			}
			.qrimg {
				width: 400rpx;

				height: 400rpx;
			}

		}

在h5页面上混合属性mix-blend-mode不生效
原因可能是：元素没有设置position属性或者z-index属性，导致混合模式无法生效。
我加上 z-index: 5 就解决了

		.detail-containergreen {
			// margin-top: -54rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 400rpx;
			height: 400rpx;

			&::before {
				position: absolute;
				content: "";
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				background: rgba(67, 207, 123.99999999999997, 1) !important;
				background-color: rgba(67, 207, 123.99999999999997, 1) !important;
				mix-blend-mode: lighten;
				z-index: 5,//加上這一段就展示了
			}

mix-blend-mode的属性


mix-blend-mode:normal;//正常	mix-blend-mode:multiply;//正片叠底
mix-blend-mode:screen;//滤色	mix-blend-mode:overlay;//叠加
mix-blend-mode:darken;//变暗	mix-blend-mode:lighten;//变亮
mix-blend-mode:color-dodge;//颜色减淡	mix-blend-mode:color-burn;//颜色加深
mix-blend-mode:hard-light;//强光	mix-blend-mode:soft-light;//柔光
mix-blend-mode:difference;//差值	mix-blend-mode:exclusion;//排除
mix-blend-mode:hue;//色相	mix-blend-mode:saturation;//饱和度
mix-blend-mode:color;//颜色	mix-blend-mode:luminosity;//亮度
mix-blend-mode:initial;	mix-blend-mode:inherit;
mix-blend-mode:unset;	-