css 剪辑图片_CSS clip:rect 矩形剪裁功能,截取图片某一块
CSS clip:rect 矩形剪裁功能,截取圖片某一塊
2016-12-14 10:43
4715
最近我在制作一款主題的時候,在自適應css設計中,為了調整圖片大小,又不愿意改變圖片比例的情況下,用到了CSS剪裁功能。
說實話,這個功能在國內運用的比較少。CSS中有一個屬性叫做clip,為修剪,剪裁之意。配合其屬性關鍵字rect可以實現元素的矩形裁剪效果。此屬性安安穩穩地存在于CSS2.1中,且使用上基本上沒有類似于max-height/display:table-cell等瀏覽器的兼容性問題。但是,貌似大家很少使用此屬性。我總結了三點原因:首先是理解上有些門檻;二是其他人使用的不多;三是此屬性功能效果有不少替代方案。
我們使用overflow可以實現塊內容的剪裁,而圖片剪裁我們卻很少用到。我們往往是將圖片進行等比例縮小。所以很少用到clip剪裁。但是等比例縮小問題來了,他很可能不能將圖片縮小為我們想要的尺寸。那么用clip屬性就省事不少。
相關CSS代碼如下:
.hidden{
position:absolute;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
其中方向含義為rect(top right bottom left),就順序上而言,top → right → bottom → left,在CSS中是統一相承的,就像是margin的四個值的順序,border-width等等的四個值順序——從頭頂上開始,順時針旋轉的說~~不過這里的四個值是不可以縮寫的。
其中top right bottom left表示各個位置的屬性值,就像是width:200px;中的200px,所以,我們會有類似下面的使用:rect(30px 200px 200px 20px)
那這里的top right bottom left究竟指什么的?我們該如何理解呢?
其實是這樣的,top right bottom left分別指最終剪裁可見區域的上邊,右邊,下邊與左邊。而所有的數值都表示位置,且是相對于原始元素的左上角而言的。于是rect(30px 200px 200px 20px)表示的含義就是:最終剪裁的矩形的上邊距離原始元素的上邊緣30像素;剪裁矩形的右邊緣距離原元素左邊緣的距離是200像素;剪裁矩形的下邊緣距離原元素頂部的距離為200像素;剪裁矩形的左邊緣距離原元素左邊緣的距離時20像素。如下圖(300像素*300像素)所示:
這樣就不難理解了。但是在實際使用過程中可能與我們想向中的不符。那么就需要不斷的改變其四個值去進行嘗試。其實我在使用margin和padding屬性的時候就經常改變四個值進行微調。
當然,這個屬性比較糟心的前提是,圖片需要在絕對定位之下才能使用,且使用后可能會改變圖片位置。這時候就需要用left right margin-left:-xx?margin-right:-xx來調節位置了。當然也可以設置其父元素為絕對定位。而且父元素使用clip對子元素同樣有效。如下Html:
我們可以這樣寫css:
#123{
position:absolute;
clip: rect(1px 1px 1px 1px);
}
好了,此文到此結束,大家不妨試試~
總結
以上是生活随笔為你收集整理的css 剪辑图片_CSS clip:rect 矩形剪裁功能,截取图片某一块的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: cac会议投稿难度大吗_发表 SCI 论
- 下一篇: rasp 系统_RASP攻防 —— RA