HTML和 CSS学习---（11）_css swatch前缀-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42919657/article/details/104027286

本文介绍了来自在线教程频道'online tutorial'的一个网页设计案例，该设计实现了具有两个调色板背景的页面。文章详细讲解了HTML结构以及CSS样式，特别是如何利用伪元素`::-webkit-color-swatch`和`::-webkit-color-swatch-wrapper`将第二个调色板置于中心位置。这是一个非常实用的学习资源，适合前端开发者参考。

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

HTML和 CSS学习---（11）

内容介绍

![Alt]
(https://yt3.ggpht.com/a/AGF-l7_JOPbXWp3QXZDuk7CCOzxdwpRg8MFJliMx5A=s900-c-k-c0xffffffff-no-rj-mo0）
这个学习资源来自于一个youtuber开的频道，名字叫做online tutorial（https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog/featured）, 从第一次无意间系统推送给我他的频道的时候我就被他发的一些自创css style深深吸引，也借以这个平台来和大家分享一下一些很有用的学习资源。**

简介

今天介绍的是一个同时拥有拥有2个调色板背景图的网页设计

代码

html

<section>
        <input type="color" name="">
        <div class="box">
            <input type="color" name="">
        </div>
    </section>

两个调色板分别放置在中心与整个屏幕

css文件

body {
    margin: 0;
    padding: 0;
}

section {
    position: relative;
    width: 100%;
    height: 100vh;
    background: #ff0;
}

section .box {
    width: 400px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, .5);
}

1.这里主要就是将第二个调色板放置在中心位置

input[type="color"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

::-webkit-color-swatch {
    border: none;
}

::-webkit-color-swatch-wrapper {
    padding: 0;
}