CSS：实现择色器透明度条的两种方法（附赠一个在线图片转base64网站）

news2025/1/15 23:47:53

一、效果展示

二、实现方式

1.锥形渐变

   .main{
      width: 600px;
      height: 20px;
      background: repeating-conic-gradient(
        rgba(1, 1, 1, 0.1) 0 25%,
        transparent 0 50%
      );
      background-size: 20px 20px;
    }

2.背景图

将一个四方格图片转为base64然后直接在css中使用

    .main1 {
      width: 600px;
      height: 120px;
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHkAAAB3CAYAAAAn8O85AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiUAABYlAUlSJPAAAAJTSURBVHhe7ZUxigRBDMT2//+c/cYeyqbNMfnIElRgOiqE25/fMq7rWhVIsjywWvL3+z3mGcM7tMnyQJLlgSTLA91k+QxtsjyQZHkgyfJAN/k2zxjeoU2WB5IsDyRZHugmy2dok+WBJMsDSZYHusm3ecbwDm2yPJBkeSDJ8kA3WT5DmywPJFkeSLI80E2+zTOGd2iT5YEkywNJlge6yfIZ2mR5IMnyQJLlgW7ybZ4xvEObLA8kWR5IsjzQTZbP0CbLA0mWB5IsD3STb/OM4R3aZHkgyfJAkuWBbrJ8hjZZHkiyPJBkeaCbfJtnDO/QJssDSZYHkiwPdJPlM7TJ8kCS5YEkywPd5Ns8Y3iHz3+P5myDzkmWQ+cky6HzIXn+8cZ5G/Ruk+XQOcly6JxkOXR+lDxv2swb37dB5zZZDp2TLIfOSZZD50PyvGHGeRv0bpPl0DnJcuicZDl0fpQ8b9rMG9+3Qec2WQ6dkyyHzkmWQ+dD8rxhxnkb9G6T5dA5yXLonGQ5dH6UPG/azBvft0HnNlkOnZMsh85JlkPnQ/K8YcZ5G/Ruk+XQOcly6JxkOXR+lDxv2swb37dB5zZZDp2TLIfOSZZD50PyvGHGeRv0bpPl0DnJcuicZDl0fpQ8b9rMG9+3Qec2WQ6dkyyHzkmWQ+dD8rxhxnkb9G6T5dA5yXLonGQ5dH6UPG/azBvft0HnNlkOnZMsh85JlkPnQ/K8YcZ5G/Ruk+XQOcly6JxkOXR+lDxv2swb37dB5zZZDp2TLIfOSZZD50PyvGHGeRvXdf3+AMzHmdQq5xjmAAAAAElFTkSuQmCC");
      background-size: 10%;
    }