mini-color-picker
mini-color-picker copied to clipboard
颜色块问题
您好,我导入代码块以后颜色有问题
请具体描述
请具体描述 开发者工具和真机都显示整一个色块
请具体描述
色域中的明度显示,完全没有,就是一个色块, 效果图中,上面是白色,明度最大,下面是黑色,明度最小, 但是实际代码运行起来, 明度的效果完全看不到了
遮罩层图片丢失了,添加两个div 然后加入遮罩层就可以了。 color-picker.wxml 修改
<movable-area class="target" style="background-color:{{hueColor}}"> <view class="white-mask"></view> <view class="black-mask"></view> <movable-view direction="all" bindchange="changeSV" x="{{x}}" y="{{y}}" animation="{{false}}" class="iconfont icon-ios-locate-outline" bindtouchend="onEnd"></movable-view> </movable-area>
color-pricker.css 添加
.target { height: 600rpx; width: 600rpx; position: relative; top: 0; left: 70rpx; right: 0; bottom: 0; /* background-image: url(http://lumsn.3322.org:23001/fs/controller/files/mask.png); */ /* background: -webkit-gradient(linear,left top,right top,from(#fff),to(hsla(0,0%,100%,0))); */ /* background: linear-gradient(0deg,#000,transparent); */ overflow: hidden; border: 0.5px solid rgba(0, 0, 0, 0.5); transition: border .2s ease-in-out,box-shadow .2s ease-in-out,-webkit-box-shadow .2s ease-in-out; } .white-mask{ background: linear-gradient(90deg,#fff,hsla(0,0%,100%,0)); height: 600rpx; width: 600rpx; position: relative; top: 0; right: 0; bottom: 0; } .black-mask{ background: linear-gradient(0deg,#000,transparent); height: 600rpx; width: 600rpx; position: relative; top: -600rpx; right: 0; bottom: 0; } .ribbon { background: -webkit-linear-gradient(left, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); width: 600rpx; margin: 40rpx 0; margin-left: 70rpx; }