使div的一部分透明

Question

我正在尝试用HTML做这样的事情。这是一个标题，位于页面的顶部。棋盘区必须是透明的。

如果不使用15个div，我想不出一个好方法。

Answer 1

未来选项

理想情况是使用没有图像的单个元素。

虽然浏览器支持有限，但屏蔽和/或裁剪在这种情况下会有所帮助。自从我第一次写下这个答案以来，似乎已经在规范（下面）上取得了进展，所以这是令人鼓舞的。

• http://www.w3.org/TR/css-masking/
• http://www.html5rocks.com/en/tutorials/masking/adobe/

实用方法

目前，我会使用基于图像的解决方案。它不需要很复杂。

我建议避免光栅图形，因为高密度显示器变得越来越普遍（几乎每个平板电脑/智能手机和4K PC显示器）。为此，SVG可以在大多数现代浏览器中使用，PNG可以用作后备。

演示

• 以下是使用PNG的演示：http://jsfiddle.net/MxspA/6/。
• 与IE7支持相同的演示：http://jsfiddle.net/MxspA/9/（用额外元素替换:before和:after）。

IE8 +版本的来源

<div id="box">
    <div id="knockout"></div>
</div>

#box{ 
    position: relative; 
}

#knockout {
    background-image: url(http://i.stack.imgur.com/AXHM0.png);
    width: 105px;
    height: 180px;
    margin: 0 auto;    
}

#knockout:before{
    content: " ";
    position: absolute;
    left: -52px;
    width: 50%;
    height: 100px;
    background-color: #000;
}

#knockout:after{
    content: " ";
    position: absolute;
    right: -52px;
    width: 50%;
    height: 100px;
    background-color: #000;
}

图片

这是一个透明的PNG，可以帮助您入门。具有基本Adobe Illustrator技能的人可以将其重新创建为SVG图像，从而提供上述高分辨率功能。 SVG可以很好地用作背景图像。

Answer 2

可以使用CSS-alpha掩码：https://caniuse.com/#feat=css-masks

更新1

• 在ontop上创建DIV - 层
• 插入CANVAS - 元素。将黑色部分涂成黑色，其余部分应透明。

更新2

我很确定，如果不在旧浏览器中使用带有alpha图层的PNG图像，则无法创建此布局。

Answer 3

编辑：在@yentups再次张贴小提琴的帮助下扩展了我的演示。

我用渐变的渐变玩了一下，想出了以下内容。你必须玩一下并习惯径向渐变的语法。对我来说现在已经很晚了，我现在不会把它包围起来。祝你好运！

演示： http://jsfiddle.net/5VDLX/

<强> HTML：

<div class="container">
    <div class="shape"></div>
    <div class="circle"></div>
</div>

<强> CSS：

body{
    background: yellow;
}
.shape {
    width: 500px;
    height: 75px;
    background-color: transparent;
    background-image: -webkit-radial-gradient(50% 100%, circle, transparent 50px, black 0);
    background-image: radial-gradient(50% 100%, circle, transparent 50px, black 0);
}
.circle {
    width: 100px;
    height: 100px;
    background-color: transparent;
    border: 2px solid red; /* red for demonstration */
    border-radius: 50px;
    margin: -51px 0 0 199px; /* considering borders */
}

• 浏览器支持CSS3渐变 http://caniuse.com/#feat=css-gradients
• 浏览器支持CSS3背景图片选项http://caniuse.com/#feat=background-img-opts

Answer 4

使用kleinfreund的代码：
这DEMO

完整工作的网页示例：here

Answer 5

**Demo Working Link** - https://codepen.io/iamabhishek/pen/ddoomE

**HTML**
<div class="main">
  <div></div>
</div>

**css**
div.main{
    width:50%;
    height:550px;
    background: url('https://images.unsplash.com/photo-1503135935062-b7d1f5a0690f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=cf4d0c234ecaecd14f51a2343cc89b6c&dpr=1&auto=format&fit=crop&w=376&h=564&q=60&cs=tinysrgb') no-repeat;
    background-position:center;
    background-size:cover
}
div.main>div{
    width:100px;
    height:320px;
    background:transparent;
    background-attachment:fixed;
    border-top:25px solid orange;
    border-left:120px solid orange;
    border-bottom:25px solid orange;
    border-right:10px solid orange;
    margin-left:150px

}