Tranparent div to div with rounded corners background
I have a transparent div on the bottom of a div with an inverse image. Everything is fine, but in the rounded corners of the transparent part, the background image "shines trough".
There is a fiddle link:
There is my html:
<div id="zkus">
<div id="zkus_popis"></div>
</div>
There is my 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;
}
Thank..:)
source to share
I've had success with either of two different methods:
-
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;
-
Apply small
transform
to#zkus_popis
:-webkit-transform: translateZ(1px); -ms-transform: translateZ(1px); -o-transform: translateZ(1px); transform: translateZ(1px);
source to share
This has been reported as a bug many times (see this report and related duplicates https://bugs.webkit.org/show_bug.cgi?id=23166 , firefox: https://bugzilla.mozilla.org/show_bug.cgi?id = 921341 ), because even with use, the background-clip: border-box
content cannot be copied correctly, leaving a few pixels to be deleted.
You can enable webkit browsers by applying (launching 3D browser acceleration):
-webkit-backface-visibility:hidden;
http://jsfiddle.net/easwee/8up9pkfo/
Firefox seems to be aware of this issue but are still waiting for another bug fix related to the same code - I cannot provide a CSS workaround for Firefox, however you can try using SVG clipping to fix the issue in Firefox ..
source to share
I tried adding a black box shadow to try and hide this background image. It's a little hacked, but it works.
#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;
}
source to share
-webkit-backface-visibility: hidden;
is a solution, but it's not very robust because for exaple, if I have a gradient background it looks like http://jsfiddle.net/jw1k98dt/30/ (There is something black in the corner).
If you set the same radius on both divs it looks like http://jsfiddle.net/jw1k98dt/31/ . So what radius should the corners have?
source to share