CSS躬行記(8)——裁剪和遮罩
一、 裁剪
裁剪(clipping)能讓元素顯示指定形狀的區域,在布局時可起點綴的作用,豐富了視覺呈現。注意,裁剪本質上只是讓元素的部分區域透明,由此可知,裁剪完後元素所佔的空間仍舊會保留。裁剪最早是在CSS 2.1時代由clip屬性引入,但該屬性只能應用於絕對定位的元素,並且只能裁剪成矩形。CSS3提供了強大的clip-path屬性,突破了clip屬性的眾多限制,接下來將圍繞clip-path屬性展開講解。
1)裁剪形狀
clip-path屬性可以使用四種裁剪函數:circle()、ellipse()、inset()和polygon(),它們的作用和浮動形狀中的shape-outside屬性中的形狀函數相同。
下面用一個例子來演示這四個函數的效果,將它們分別應用到四個div元素中,樣式如下,得到的形狀如下圖所示。
div { width: 200px; height: 200px; background: url(./lake.png); } .circle { clip-path: circle(50%); } .ellipse { clip-path: ellipse(50% 30%); } .inset { clip-path: inset(20px 10px); } .polygon { clip-path: polygon(0 0, 100px 0, 160px 200px, 0 200px); }
2)裁剪盒子
裁剪盒子可指定形狀的邊界,其中margin-box、border-box、padding-box和content-box的作用與shape-outside屬性中的相同,並且這些關鍵字也能與裁剪函數組合使用,如下所示。在下圖中,左側是原圖,右側是使用了clip-path屬性後的效果。
div { width: 160px; height: 160px; padding: 20px; clip-path: content-box circle(50%); }
還有三個關鍵字view-box、fill-box和stroke-box適用於SVG元素,具體用途可在網上查到相關資料。
3)裁剪路徑
對於複雜的形狀,可以採用SVG來創建裁剪路徑,實現自定義。引用方式和濾鏡中的一樣,也是使用url()函數,但指向的是SVG文件中的clipPath元素,下面的SVG文件源自MDN網站。
<svg height="0" width="0" xmlns="//www.w3.org/2000/svg"> <defs> <clipPath id="cross"> <rect y="110" x="137" width="90" height="90" /> <rect x="0" y="110" width="90" height="90" /> <rect x="137" y="0" width="90" height="90" /> <rect x="0" y="0" width="90" height="90" /> </clipPath> </defs> </svg>
有兩種方式引用SVG文件中的形狀,第一種是外部引用,將SVG元素放在單獨的文件中;第二種是行內引用,將SVG元素放在當前的HTML結構中。下面用兩個CSS類來演示這兩種引用方式,其中url()函數接收的參數的最大區別就是是否包含文件路徑。
.url-cross { clip-path: url(./shapes.svg#cross); } .inline-cross { clip-path: url(#cross); }
兩種方式的效果是相同的,都是將元素裁剪成四部分,如下圖所示。注意,外部引用的瀏覽器支援度比較糟糕,目前只有Firefox支援。
二、遮罩
1)蒙版
蒙版(masking)與裁剪類似,也是讓元素以某種形狀顯示,但蒙版能根據透明度和灰度值計算裁剪邊緣,並且有更多的蒙版屬性可供選擇,例如定位、尺寸、填充方式等。
下面用一個例子來演示蒙版的用法,首先創建HTML結構,包含三個div元素。
<div class="lake"></div> <div class="star"></div> <div class="lake star-mask"></div>
然後為三個div元素添加背景圖,並給第三個元素定義蒙版,樣式如下。注意,在Chrome瀏覽器中定義蒙版屬性時,需要額外添加-webkit-前綴,例如將原來的mask-image屬性改成-webkit-mask-image屬性。
.lake { background: url(./lake.png); } .star { background: url(./star-shadow.png); background-position: center; background-repeat: no-repeat; } .star-mask { mask-image: url(./star-shadow.png); mask-position: center; mask-repeat: no-repeat; }
在下圖中,將第二張五角星作為蒙版,作用到第一張風景照中,第三張是發生遮罩後的效果圖,可以看到五角星中不透明和半透明的區域會顯示風景照中的內容。
在.star-mask類中用到了mask-position,它的語法與background-position一樣,下表列出了所有的蒙版屬性和背景屬性之間的對應關係。
蒙版屬性 | 背景屬性 | 作用 |
mask-size | background-size | 調整蒙版的尺寸 |
mask-repeat | background-repeat | 調整蒙版的填充方式 |
mask-position | background-position | 調整蒙版的定位 |
mask-origin | background-origin | 調整蒙版的原點 |
mask-clip | background-clip | 調整蒙版的裁剪區域 |
CSS還提供了一個簡寫屬性mask,可將上述屬性合併到該屬性中。關於蒙版還有一點需要注意,那就是遮罩用的蒙版影像既可以是點陣圖影像(png、jpg等),也可以是矢量圖形(指向SVG中的mask元素)。
2)替換元素的填充和定位
CSS3引入了兩個新屬性,用於遮罩替換元素。第一個是object-fit屬性,用來控制替換元素的內容以何種方式填充當前所使用的元素盒子,它有5個關鍵字可供選擇,如下所列,效果如下圖所示。
(1)fill:將元素盒子填充滿,它是object-fit屬性的默認值。
(2)contain:保持寬高比縮放,直到能將整塊內容填充進元素盒子為止。
(3)none:保持原有尺寸填充。
(4)cover:保持寬高比縮放,直到水平或垂直方向撐滿元素盒子為止。
(5)scale-down:作用與none或contain中的一個相同,取決於誰的尺寸更小。
第二個是object-position屬性,用來控制替換元素的內容在元素盒子中的位置,其語法和background-position相同。