CSS3提供了很多新的屬性和選擇器來處理圖片，讓圖片在不同的設備和瀏覽器上兼容顯示。下面介紹一些常用的CSS3圖片兼容技術。

/* 響應式圖片 */
img {
max-width: 100%;
height: auto;
}
/* 圖片蒙層 */
.img-mask {
position: relative;
}
.img-mask:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.5;
background-color: black;
}
/* 高清圖片 */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.hd-img {
background-image: url(example@2x.png);
background-size: cover;
}
}
/* CSS Sprites */
.sprite {
background-image: url(sprite.png);
background-repeat: no-repeat;
display: inline-block;
}
.icon1 {
width: 32px;
height: 32px;
background-position: 0 0;
}
.icon2 {
width: 64px;
height: 64px;
background-position: -32px 0;
}

上述代碼中，響應式圖片通過限制圖片最大寬度，并設置高度自適應來實現在不同寬度的設備上自適應顯示。圖片蒙層通過使用偽元素:after來實現圖片上覆蓋一層半透明黑色蒙層的效果。

高清圖片通過@media查詢來判斷設備的像素密度，選擇使用1倍或2倍分辨率的圖片來實現高清效果。CSS Sprites是一種將多個小圖片合并成一張大圖片的技術，可以減少HTTP請求并加速網頁加載速度。

總之，CSS3提供了很多強大的圖片處理功能，可以讓開發者輕松實現圖片的兼容，并提升網站的速度和體驗。