帶有圓角的背景圖像的div中的透明div

我對圖像背景的div底部有透明div。一切都好，但在透明部分的圓角處，背景圖像「閃耀」。帶有圓角的背景圖像的div中的透明div

有鏈接撥弄：

有我的html：

<div id="zkus"> 
     <div id="zkus_popis"></div> 
    </div>

有我的CSS：

#zkus{ 
    background: url('test.jpg'); 
    width: 200px; 
    height: 180px; 
    background-size: 100%; 
    box-shadow: inset 0px 0px 20px #d1cfcf; 
    /* box-shadow: 0 0 10px #5c5c5c;*/ 

    border-radius: 12px 12px 15px 15px; 
    position: relative; 
    overflow: hidden; 
    display: inline-block; 
    /* border: 1px solid #8d8d8d;*/ 
    margin: 0 12px 10px 10px; 
} 

#zkus_popis{ 
    width: 200px; 
    height: 35px; 
    background-color: #000000; 
    position: absolute; 
    bottom: 0; 
    opacity: 0.9; 
    border-radius: 0px 0px 12px 12px; 
overflow: hidden; 
}

謝謝.. :)

來源

2014-10-08 Jan Cizmar

我發現的唯一解決方案是使用'img'標籤而不是背景圖片。所以把另一個div放在那裏。 – 2014-10-08 22:05:18

我有以下兩種不同的方法成功：

應用backface-visibility到#zkus_popis：

-webkit-backface-visibility: hidden; 
-moz-backface-visibility: hidden; 
-ms-backface-visibility: hidden; 
-o-backface-visibility: hidden; 
backface-visibility: hidden;

WORKING EXAMPLE

取一小transform到#zkus_popis：

-webkit-transform: translateZ(1px); 
-ms-transform: translateZ(1px); 
-o-transform: translateZ(1px); 
transform: translateZ(1px);

WORKING EXAMPLE

來源

2014-10-08 21:50:47 showdev

以上對於webkit是正確的 - 但是Firefox仍然會顯示相同的錯誤。 – easwee 2014-10-08 21:54:51

@easwee同意。這似乎沒有幫助Firefox。 – showdev 2014-10-08 22:02:31

這是之前報告過的多次錯誤（請參閱此報告並鏈接重複文件https://bugs.webkit.org/show_bug.cgi?id=23166，firefox：https://bugzilla.mozilla.org/show_bug.cgi?id=921341），因爲即使使用background-clip: border-box也無法正確剪輯內容，只留下幾個像素流血。

您可以通過應用（觸發瀏覽器的3D加速）WebKit的基於瀏覽器解決這個問題：

-webkit-backface-visibility:hidden;

http://jsfiddle.net/easwee/8up9pkfo/

在Firefox好像他們都知道這個問題，但仍在等待另一個bug修復與相同的代碼有關 - 我無法提供適用於Firefox的純CSS解決方法，但是您可以嘗試使用SVG clipping在Firefox中解決此問題..

來源

2014-10-08 21:50:37 easwee

我嘗試添加一個黑盒子陰影，試圖掩蓋了背景圖片。它有點冒險，但它的作品。

#zkus{ 
background: url('http://zkusebny2.chlupac.com/images/test.jpg'); 
width: 200px; 
height: 180px; 
background-size: 100%; 
border-radius: 12px 12px 15px 15px; 
position: relative; 
overflow: hidden; 
display: inline-block; 
box-shadow: inset 0px 0px 0px 1px #000000, 0px 0px 0px 1px #000000; 
margin: 0 12px 10px 10px; 
} 

    #zkus_popis{ 
    width: 200px; 
    height: 38px; 
    background-color: #000000; 
    position: absolute; 
    bottom: -3px; 
    opacity: 1; 
}

來源

2014-10-08 21:58:48 Justin

注：這可以是一個解決方案，但它會影響視覺樣式 - 所以它不是沒有缺點。 – easwee 2014-10-08 22:02:24

-webkit-backface-visibility: hidden;

是一個解決方案，但它是不是很可靠的，因爲的exaple，如果我有梯度的背景下，它看起來像這樣http://jsfiddle.net/jw1k98dt/30/（也有一些是黑的角落）。

如果您在兩個div上設置相同的半徑，它看起來像這樣http://jsfiddle.net/jw1k98dt/31/。那麼角的半徑應該是多少？

來源

2014-10-08 22:22:21

#zkus{ 
    border-radius: 10px 10px 0 0; 
    }

來源

2014-10-09 03:48:49 Chelacy

帶有圓角的背景圖像的div中的透明div

回答

相關問題