用CSS/border-radius掩蓋圖像

我在一個新的網站上爲一位朋友工作，而我正面臨一個圖像問題，我用CSS邊框半徑掩蓋。用CSS/border-radius掩蓋圖像

圖像比容器大，高，我用JS來正確居中。但是，谷歌瀏覽器和Safari似乎並不支持我想在這裏實現的目標......它在Firefox上看起來不錯並且流暢。

我想知道如何在Chrome和Safari上解決這個問題。

當前只顯示一個圖像。

來源

2011-12-20 Jk_

該鏈接不起作用 – 2011-12-20 20:54:45

鏈接爲我和網站工作真的很酷。它看起來像溢出：隱藏不適用於Chrome中的圓形對象。不知道爲什麼。您可能想嘗試發佈只顯示代碼問題部分的小提琴。 – mrtsherman 2011-12-20 21:00:37

您已絕對定位img元素。如果您將figure（它們的父級）定位在相對位置，則圖像將以鉻形式正確居中。

所以，單純從

<figure style="opacity: 0; "> 
    <img src="img/pic001_thumb.jpg" title="work 1" style="top: 100px; left: 100px; "> 
</figure>

更改figure的CSS來

<figure style="position: relative; opacity: 0; "> 
    <img src="img/pic001_thumb.jpg" title="work 1" style="top: 100px; left: 100px; "> 
</figure>

由於swatkins指出，看來你的JavaScript是針對不同的瀏覽器設置不同left和top值。我會搶先拳頭找到通過CSS的常見修復。

我在這臺機器上沒有FF，但position: relative也可能適用於該瀏覽器。

來源

2011-12-20 21:15:34

我增加了位置：相對於數字元素，但圖像仍然顯示不正常。圓角似乎爲img工作。 – 2011-12-20 21:30:59

@Jk_我的答案是解決這個問題。現在圖像顯示居中。圓角無法工作的問題似乎是一個Chrome問題，請查看http://code.google.com/p/chromium/issues/detail?id=71639您可能會考慮使用透明PNG而不是元素與'border-radius' – 2011-12-20 21:46:45

錯誤是在您的JavaScript。

在Firebug，鉻給了我這樣的：

<article class="thumb-container" 
    style="width: 200px; height: 200px; margin-top: 10px; 
      background-color: rgb(216, 228, 125); 
      overflow-x: hidden; overflow-y: hidden; "> 
    <figure style="opacity: 1; "> 
     <img src="img/pic001_thumb.jpg" title="work 1" style="top: 100px; left: 100px; "> 
    </figure> 
</article>

和Firefox給我這樣的：

<article class="thumb-container" 
    style="width: 200px; height: 200px; margin-top: 10px; 
      background-color: rgb(216, 228, 125);"> 
    <figure style="opacity: 1;"> 
     <img title="work 1" src="img/pic001_thumb.jpg" style="top: -78px; left: -25px;"> 
    </figure> 
</article>

你可以看到不同的是在img標籤的style屬性。我快速瀏覽了javascript，沒有看到任何明顯的東西，但那將是開始的地方。

來源

2011-12-20 21:04:13 swatkins

用CSS/border-radius掩蓋圖像

回答

相關問題