用CSS模擬圖像「覆蓋」

基本上我試圖模擬Photoshop的圖像覆蓋東西使用圖像和CSS的菜單。用CSS模擬圖像「覆蓋」

有兩個版本的菜單背景圖像：一個是正常狀態（粉紅色），另一個是活動狀態（藍色）。整個菜單都包含在DIV中，其中正常（粉紅色）圖像作爲背景。

我該如何做到這一點，使每個活動菜單鏈接使用相應的藍色圖片？

像這樣：

enter image description here

My code so far

你認爲這是可能的CSS？

來源

2011-08-06 Alex

你能提供您當前的代碼？ –

我根本不會使用圖像。完全可行的CSS完全可行。 – AlienWebguy

我正在考慮在100％寬度的相對於整個菜單的鏈接裏放一個帶有背景的span元素，並且使用z-index以某種方式實現這個... – Alex

如果您需要支持舊版本的瀏覽器並且無法使用css3，有很多方法可以實現這一點。其中之一：

你可以切出的整個事情的藍色圖像（你實際上可以使它更廣泛的）

然後

li.active { 
    background: url('path/to/yourImage.png') no-repeat -50px 0; 
    /* 50px or however wide that rounded tip is */ 
} 

li.active.first { 
    background-position: left top; 
} 

li.active.last { 
    background-position: right top; 
} 
/* you'll need to add 'active', 'first' and 'last' classes accordingly. */

來源

2011-08-06 10:11:46 Zhenya

CSS僅適用於現代瀏覽器的解決方案：

ul { 
    background-color:#ff00ff; 
    background-image: -moz-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%); 
    background-image: -webkit-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%); 
    background-image: -o-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%); 
    background-image: -ms-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%); 
    background-image: radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%); 
    height:50px; 
    width:400px; 
    margin:0; 
    padding:0; 
    border-radius:25px; 
    overflow:hidden; 
} 

li { 
    width:100px; 
    height:50px; 
    float:left; 
} 

li:hover { 
    background-color:rgba(0,0,255,0.2); 
}

點此查看工作演示：http://jsfiddle.net/AlienWebguy/ZLg4B/

來源

2011-08-06 00:43:15 AlienWebguy

+1優秀的作品！雖然我不想使用該導航欄訪問該網站， _personally_我認爲這有點過於苛刻，但我認爲它脫離了背景。沒有不敬的@OP。 – Bojangles

它在現實中不會看起來像這樣，這只是想法:)無論如何，菜單太複雜，不能用CSS重現。我需要圖片... – Alex

我想給予更多幫助，我們需要一個圖像複雜度的例子。 – Mig

你曾經打算具有圓形部分的鏈接？如果不是這樣，則可以僅拍攝藍色圖像的像素寬度片段，並將其設置爲:hover狀態背景，其中repeat-x。

確實有其他方法可以做到這一點，但這是最直接的恕我直言。

編輯：看到你的小提琴後，也許情況並非如此。我會考慮使用JavaScript爲每個鏈接計算適當的x偏移量，並以這種方式使用疊加圖像的一部分。或者，您可以將第一個鏈接設置爲「特殊情況」，併爲其他鏈接使用通用的不同顏色背景。

來源

2011-08-06 00:45:28 Karl

用CSS模擬圖像「覆蓋」

回答

相關問題