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

一天只码五十行

已于 2024-03-10 19:59:55 修改

阅读量428

点赞数 5

文章标签： css 前端

于 2024-03-10 00:20:10 首次发布

本文链接：https://blog.csdn.net/qq_45820271/article/details/136593673

版权

本文介绍了如何在CSS中使用锥形渐变创建动态效果，并展示了如何将四方格图片转换为base64格式直接应用于背景，同时还推荐了一个在线工具来转换图片为base64。

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

一、效果展示

二、实现方式

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%;
    }