隱藏背景圖像的一部分

我有一個背景圖像的div，包括正常和懸停狀態，所以當你鼠標懸停時，背景圖像的下半部分會顯示出來。我正在製作同一個網站的移動版本，並且我希望只顯示圖片的前半部分，因爲同一個div在高度上增長。但是，就像現在一樣，當div增長時，我顯然會看到背景圖像的後半部分。任何關於如何隱藏背景圖片底部的想法，同時仍然顯示頂部？隱藏背景圖像的一部分

.community a{background: url(images/migtea.jpg) 0 0 no-repeat #FFF; display:block;  float:left; margin:0 10px 10px 0; padding: 10px 10px 10px 151px;} 
.community a:hover{background-position: 0 -131px;}

來源

2012-09-22 Audrey

那麼唯一的問題是，「夾路徑」，「面具」和「過濾器」（無不是 IE「過濾器」，但SVG「過濾器」）僅適用於Firefox和Safari（是的沒有Chrome）。他們以不同的方式做。火狐需要通過一個ID如指定的SVG clippath ：
.box { clip-path: url("roundedrect.svg#cp1"); } 
而Safari瀏覽器只使用本身的形狀來創建clippath來自：
.box { clip-path: url("roundedrect.svg"); } 
我還沒有發現一個辦法做到這一點在Opera和Chrome中。

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

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

Tokimon （來源：Showing only part of background image using CSS3）

否則，你所能做的要麼將背景圖像分開，要麼將一個容器（div）放在背景上，並「隱藏」要隱藏的部分（但它是n非常優雅的解決方案）！

希望這會有所幫助！

來源

2012-09-22 17:11:16 mbinette

隱藏背景圖像的一部分

回答

相關問題