带有圆角的背景图像的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

回答

相关问题