Question

我在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;
}

谢谢.. :)）

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也无法正确剪切内容，只留下一些像素要流血。

您可以通过应用（触发浏览器的3D加速）来解决基于 webkit 的浏览器：

-webkit-backface-visibility:hidden;

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

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

Answer 2

我用两种不同的方法取得了成功：

将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

Answer 3

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

Answer 4

我尝试添加黑框阴影来尝试屏蔽该背景图像。它有点hacky，但它确实有效。

#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;
}

Answer 5

-webkit-backface-visibility: hidden;

是一个解决方案，但它不是很可靠，因为对于exaple，如果我有渐变背景，它看起来像http://jsfiddle.net/jw1k98dt/30/（角落里有黑色的东西）。

如果在两个div上设置相同的半径，它看起来像http://jsfiddle.net/jw1k98dt/31/。那么角落的半径应该是多少？

div中的透明div与带圆角的背景图像

5 个答案: