怎么在cs中分割圖片

怎么在cs中分割圖片？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

場(chǎng)景：如果一個(gè)頁(yè)面有個(gè)img小圖標(biāo)，那么訪問(wèn)瀏覽器的時(shí)候會(huì)因?yàn)榧虞d圖片導(dǎo)致瀏覽速度放慢。這個(gè)時(shí)候?qū)⑦@么多的小圖標(biāo)放在一起，整合成一個(gè)img，那么只需要訪問(wèn)一張圖片就可以了。就可以減少請(qǐng)求圖片的次數(shù)

方法一

在CSS中元素的background:background-color || background-image || background-repeate || background-attachment || background-position，示例如下：

background:transparent url(123.jpg) no-repeat scroll -140px -20px;

transparent 表示透明度無(wú)顏色

url(123.jpg) 表示背景圖片

no-repeat 表示圖片不重復(fù)

scroll 表示背景圖片隨瀏覽器下拉而滾動(dòng)

-140px 表示水平位置在圖片的-140px處（以圖片的左上角為0,0）

-20px 表示垂直位置在圖片的-20px處

但是我發(fā)現(xiàn)上面的不適合我想要的，

上面的效果來(lái)看只能顯示圖片的右下角。那再試試第二種方法

方法二

用 img 的 clip 屬性中的 rect ,clip:rect(y1,y2,x2,x1)參數(shù)說(shuō)明如下

y1 = 定位的 y 坐標(biāo)（垂直方向）的起點(diǎn)

y2 = 定位的 y 坐標(biāo)（垂直方向）的終點(diǎn)

x1 = 定位的 x 坐標(biāo)（垂直方向）的起點(diǎn)

x2 = 定位的 x 坐標(biāo)（垂直方向）的終點(diǎn)

注意：坐標(biāo)的起點(diǎn)是在左上角

代碼如下：

    img{
        position:absolute;
        clip:rect(20px ,100px , 50px , 20px);
}

在實(shí)際操作過(guò)程中，發(fā)現(xiàn)兩個(gè)問(wèn)題：1.rect方法里面需要帶上逗號(hào)，2.必須要帶上position，并且需要是絕對(duì)定位，也就是absolute 或者 fixed屬性。

關(guān)于怎么在cs中分割圖片問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。