在带有圆角背景图片的div中创建透明的div。

Question

我在具有图像背景的div底部有一个透明的div。一切都很好，但在透明部分的圆角处，背景图像会“透过来”。

这里有一个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;
}

谢谢.. :)

- Jan Cizmar

---

我找到的唯一解决方案是使用 img 标签而不是背景图片。因此在其中再放一个 div。 - Don Rhummy

Answer 1

这个问题在之前已经被多次报告过 (请参见此报告和相关的重复报告：https://bugs.webkit.org/show_bug.cgi?id=23166，火狐浏览器：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剪辑来解决它。

- easwee

Answer 2

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

1. Apply backface-visibility to #zkus_popis:

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

   WORKING EXAMPLE

2. Apply a small transform to #zkus_popis:

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

   WORKING EXAMPLE

- showdev

---

以上内容适用于 WebKit - 然而 Firefox 仍然会显示相同的错误。 - easwee

@easwee 同意。这似乎对Firefox没有帮助。 - showdev

Answer 3

我尝试添加黑色阴影来掩盖背景图片。这有点取巧，但它有效。

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

- Justin

---

注意：这可能是一个解决方案，但它会影响视觉样式 - 所以它并非没有缺点。 - easwee

Answer 4

-webkit-backface-visibility: hidden;

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

如果在两个div上设置相同的半径，则会看起来像这样http://jsfiddle.net/jw1k98dt/31/。那么角落应该有什么半径呢？

- Jan Cizmar

Answer 5

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

- Chelacy