CSS3是Web開發中必不可少的一個技術，它不僅能夠實現復雜的頁面布局，還可以實現非常特殊的效果，例如抓取圖片色值。

在以往，如果要獲取一張圖片的色值，需要使用Photoshop等軟件一張張去取色，費時費力，而CSS3的出現，為我們提供了一種更加便捷的方式。

img {
display: block;
width: 100%;
height: auto;
}
.photo {
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.photo:hover .overlay {
background-image: url("photo.jpg");
}
.photo:hover .color-box {
visibility: visible;
}
.color-box {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
visibility: hidden;
background-color: rgba(255, 255, 255, 0.8);
}
.color {
width: 30px;
height: 30px;
margin: 10px;
border-radius: 50%;
display: inline-block;
position: relative;
top: 10px;
left: 10px;
}

以上代碼為HTML和CSS的示例，首先需要一個包含圖片和一個遮罩層的div，當鼠標滑過圖片時，遮罩層的背景圖片會更換為該圖片，然后通過JavaScript獲取圖片各個像素點的顏色值，將顏色值渲染到頁面上，形成一個像素點陣的顏色展示框。

總之，CSS3抓取圖片色值不僅可以方便地獲取圖片的色值，還可以為頁面增加視覺效果。