CSS背景切割

这是我的代码，正如你所看到的机体有一些背景图像，并且#cont应该是白色的。但我希望我的div元素透明，可以看到身体背景图像。任何可以做到这一点的CSS技巧？CSS背景切割

body { 
 
    margin: 0; 
 
    border: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-image: url(image.png); 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 
#cont { 
 
    margin: 0; 
 
    border: 0; 
 
    padding: 0; 
 
    background-color: white; 
 
} 
 
#cont div { 
 
    margin: 20px; 
 
    border: 1px solid gray; 
 
    padding: 0; 
 
    width: 50px; 
 
    height: 50px; 
 
    float: left; 
 
}

<div id="cont"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

来源

2016-11-14 Pero B

你拨弄不显示问题。 –

将image.png添加为链接，以便我们可以看到它。 –

我知道，但我不希望我的div元素像#cont背景那样变白。我希望他们能够“剪切”白色背景并显示身体背景图像 –

这里是更新的片段：

body { 
    margin: 0; 
    border: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
    background-image: url(https://placekitten.com/1000/1000); 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; /*include this*/ 
    background-attachment: fixed; /*include this*/ 
} 
#cont { 
    margin: 0; 
    border: 0; 
    padding: 0; 
    background-color: white; 
} 
#cont div { 
    margin: 20px; 
    border: 1px solid gray; 
    padding: 0; 
    width: 50px; 
    height: 50px; 
    /*float: left; replaced by display inline-block*/ 
    display: inline-block; /*include this*/ 
    background: url(https://placekitten.com/1000/1000) center center no-repeat; /* <<< same body image*/ 
    background-size: cover; /*include this*/ 
    background-attachment: fixed; /*include this*/ 
}

下面是完整的例子：jsbin

来源

2016-11-14 20:21:35 jotavejv

伟大的思想有...学到了新的东西:) – kukkuz

您可以将背景图片添加到您的div元素，并与背景位置发挥给人一种透明的错觉。

如果您使用JavaScript，您可以获取元素的x/y位置并动态调整css。

来源

2016-11-14 15:48:20 Poney

是的，这确实让我想起了它，但似乎太多的调整要做。我希望我可以用CSS解决它 –

我认为这是你可以达到这种行为的唯一方法。 – GiuServ

或者你可以玩边框。你让.cont是透明的，但是你可以用0填充将白色边框添加到顶部和底部。然后你为你的div添加左右边框。 – Poney

检查它： -

body { 
 
    margin: 0; 
 
    border: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 
#cont { 
 
    margin: 0; 
 
    border: 0; 
 
    padding: 0; 
 
    opacity: 0.3; 
 
} 
 
#cont div { 
 
    margin: 20px; 
 
    border: 1px solid gray; 
 
    padding: 0; 
 
    background-color: white; 
 
    width: 50px; 
 
    height: 50px; 
 
    float: left; 
 
    background-image: url("http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg"); 
 
    background-attachment: fixed; 
 
    background-position: top center; 
 
}

<div id="cont"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

来源

2016-11-14 15:58:51

好吧，我想你错了 - 它的另一种方式 – kukkuz

你可以使用不透明度增加/减少来改变透明度。 –

你能告诉我一个jsfiddle吗？ –

CSS背景切割

回答

相关问题