怎么在cs中分割圖片

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

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供桐廬網(wǎng)站建設(shè)、桐廬做網(wǎng)站、桐廬網(wǎng)站設(shè)計(jì)、桐廬網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、桐廬企業(yè)網(wǎng)站模板建站服務(wù)，十年桐廬做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

場景：如果一個(gè)頁面有個(gè)img小圖標(biāo)，那么訪問瀏覽器的時(shí)候會(huì)因?yàn)榧虞d圖片導(dǎo)致瀏覽速度放慢。這個(gè)時(shí)候?qū)⑦@么多的小圖標(biāo)放在一起，整合成一個(gè)img，那么只需要訪問一張圖片就可以了。就可以減少請(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 表示透明度無顏色

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

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

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

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

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

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

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

方法二

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

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

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

本文標(biāo)題：怎么在cs中分割圖片
當(dāng)前網(wǎng)址：http://m.jiaotiyi.com/article/jciseh.html