css 实现马赛克背景，ps透明背景，未选颜色的展示方式

草字

已于 2022-11-11 17:16:15 修改

阅读量916

点赞数

分类专栏： Css css布局和动画模板 Html5 文章标签： css 前端

于 2022-03-01 16:06:26 首次发布

本文链接：https://blog.csdn.net/qq_42740797/article/details/123208562

版权

Css 同时被 3 个专栏收录

120 篇文章

订阅专栏

Html5

100 篇文章

订阅专栏

css布局和动画模板

44 篇文章

订阅专栏

本文介绍了两种创建圆形背景色块的方法。第一种利用CSS实现一个带有渐变效果的圆形色块，通过设置背景图像、大小和位置。第二种方法则是通过HTML和CSS创建一个带有图片背景的方块，背景图片使用了base64编码的数据。这两种技术可以丰富网页的视觉设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方式一：

效果图：

.colorVal{
    width: 55px;
    height: 55px;
    border: 1px #eee solid;
    border-radius: 50%;
    background-color: #fff;
    background-image: linear-gradient(45deg,#eee 25%,transparent 0,transparent 75%,#eee 0,#eee),linear-gradient(45deg,#eee 25%,transparent 0,transparent 75%,#eee 0,#eee);
    background-size: 19px 19px;
    background-position: 0 0,9px 9px;
    
}

<div class="colorVal " id="color_result"></div>

方式二：

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width:200px;
            height:200px;
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMzTjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>