使用CSS3

Question

僅顯示背景圖片的部分是它可以使用CSS3的時候，只顯示一個和backgroundImage的一部分嗎？我想用圖片作爲背景，但只顯示一半，所以有沒有像你可以爲你的背景圖片定義的面具？

Answer 1

那麼唯一的問題是，「夾路徑」，「面具」和「過濾器」（無不是IE的「過濾器」，但SVG「過濾器」）僅適用於Firefox和Safari（是無鉻）。他們以不同的方式做。火狐需要通過一個ID如指定的SVG clippath：

.box { clip-path: url("roundedrect.svg#cp1"); } 

而Safari瀏覽器只是利用本身的形狀來創建clippath來自：

.box { clip-path: url("roundedrect.svg"); } 

我還沒有想出一個辦法做到這一點在歌劇和鉻。

但對於FF和Safari「跨瀏覽器」例如，我創造了這個：http://tokimon.dk/testing/css-svg-test.html。

否則也許你可以得到的東西在後臺操縱的CSS 3：http://www.css3.info/preview/

Answer 2

試試這個：

body { 
    background-image: url('top.jpg'), 
         url('middle.jpg'), 
         url('bottom.jpg'); 
} 

Answer 3

的WebKit現在支持在CSS SVG圖像阿爾法口罩可作爲面具。例如，一個部分透明的圓。

-webkit掩模圖像：網址（circle.svg）;

http://webkit.org/blog/181/css-masks/

希望這會有所幫助。

Answer 4

在Opera中，你只能使用內聯SVG的XHTML頁面這樣做的效果。在SVG中查找圖像，定義一個蒙版並執行<use xlink:href="#image" mask="url(#yourmask)"/>以獲得效果。