2x圖片在網頁設計和開發中的作用越來越重要，因為它能夠提高網站的視覺效果，同時也提高了用戶的體驗。那么什么是2x圖片呢？

2x圖片指的是有兩倍分辨率的高清晰度圖片。在網頁設計中，我們通常會設置圖片的分辨率為72dpi，這樣能夠達到合適的網頁顯示效果。但是在高清晰度屏幕上，這種分辨率并不能展現圖片的所有細節，這就需要使用2x圖片。

在CSS中，我們可以使用background-image屬性或者img標簽的src屬性來引用圖片。對于2x圖片，我們需要加入一些特殊的CSS屬性來展現它們。

.backgound{
background-image: url('normal-image.png'); /*普通圖片*/
background-image: pixel-ratio(2), url('2x-image.png'); /*2x圖片*/
}

在上面的代碼中，我們使用了background-image屬性來設置應用的背景圖片，同時也使用了pixel-ratio屬性來判斷設備的像素密度。如果設備的像素密度是2，那么就會顯示2x圖片，否則會顯示普通圖片。這就是2x圖片在CSS中的應用方法。

總之，使用2x圖片能夠提高網站的視覺效果和用戶的使用體驗，同時在CSS中也有很多實用的方法來展現它們。