html - 带圆 Angular 背景图片的div中的透明div

Question

我在带有图像背景的 div 底部有透明的 div。一切正常，但在透明部分的圆 Angular 中，背景图像“闪闪发光”。

有 fiddle 的链接:

http://jsfiddle.net/jw1k98dt/

这是我的 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;
}

谢谢..:)

Answer 1

这在之前多次被报告为错误(请参阅此报告和链接的副本 https://bugs.webkit.org/show_bug.cgi?id=23166 ，firefox:https://bugzilla.mozilla.org/show_bug.cgi?id=921341 )，因为即使使用 background-clip: border-box 也无法剪辑内容正确留下几个像素流血。

基于webkit的浏览器可以通过应用(触发浏览器的3D加速)来解决:

-webkit-backface-visibility:hidden;

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

在 Firefox 中，他们似乎已经意识到了这个问题，但仍在等待与同一代码相关的另一个错误修复 - 我无法为 Firefox 提供纯 CSS 解决方法，但是您可以尝试使用 SVG clipping在 Firefox 中解决它..