CSS中的點擊生成圖片是一種非常實用的技巧，它可以讓用戶在頁面上點擊一個按鈕或者鏈接，從而生成一張圖片。此技巧不僅可以提高頁面的交互體驗，還可以用于實現各種圖片制作效果。

/* CSS代碼 */
.button {
display: inline-block;
padding: 10px 20px;
background: #009688;
color: #fff;
text-transform: uppercase;
text-decoration: none;
border-radius: 3px;
cursor: pointer;
}
.button:hover {
background: #00847e;
}
.button:active {
background: #00756b;
}
.button:active:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.8) 100%);
z-index: 1;
}
.button:active:before {
content: " ";
display: block;
position: absolute;
top: 5px;
left: 5px;
width: calc(100% - 10px);
height: calc(100% - 10px);
outline: 1px solid #fff;
z-index: 2;
}
.button:active img {
filter: blur(3px);
}

上述代碼中，我們定義了一個按鈕類`.button`，并定義了它的樣式。當用戶點擊該按鈕時，會在按鈕上添加一個偽元素，用于實現半透明黑色背景。同時，在按鈕上還會添加一個偽元素，用于實現一個白色的邊框。

此外，我們還使用了CSS的濾鏡效果，對按鈕上的圖片進行了模糊處理。通過這些細節的處理，我們可以實現一個效果非常炫酷的點擊生成圖片的效果。