Html 使div的一部分透明

我正在尝试用HTML做类似的事情。它是一个页眉，在页面的最顶端。棋盘区域必须是透明的

我想不出一个不使用15个div的好方法。

未来选项 理想的情况是使用没有图像的单个元素

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

实用方法 目前，我将采用基于图像的解决方案。它不需要很复杂

我建议避免使用光栅图形，因为高密度显示器越来越普遍（几乎所有平板电脑/智能手机和4K PC显示器）。为了实现这一点，SVG将在大多数现代浏览器中工作，PNG可以用作后备方案

演示

• 下面是一个使用PNG的演示：
• 与IE7支持相同的演示：（使用额外元素替换

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

#框{
位置：相对位置；
}
#击倒{
背景图片：url(http://i.stack.imgur.com/AXHM0.png);
宽度：105px；
高度：180像素；
保证金：0自动；
}
#淘汰赛：之前{
内容：“；
位置：绝对位置；
左：-52px；
宽度：50%；
高度：100px；
背景色：#000；
}
#淘汰赛：之后{
内容：“；
位置：绝对位置；
右：-52px；
宽度：50%；
高度：100px；
背景色：#000；
}

图像

下面是一个透明的PNG，让您开始学习。具备基本Adobe Illustrator技能的人可以将其重新创建为SVG图像，从而提供上述高分辨率功能。SVG可以很好地用作背景图像

---

使用CSS alpha掩码可能会：

更新1

• 在顶部创建一个

  DIV

  -层
• 插入

  画布

  -元素。将黑色部分涂成黑色，其余部分应透明

更新2

---

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

编辑：在@yentups posted fiddle的帮助下再次扩展我的演示

我对辐射梯度进行了一些研究，得出了以下结论。你必须玩一玩，习惯径向渐变的语法。现在对我来说已经很晚了，我现在不想再为这件事操心了。祝你好运

演示：

HTML:

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

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渐变的浏览器支持
• 浏览器支持CSS3背景图像选项

---

使用

kleinfeund

的代码：
这个
完整工作页面示例：

**演示工作链接**-https://codepen.io/iamabhishek/pen/ddoomE
**HTML**
**css**
主分区{
宽度：50%；
高度：550px；
背景：url（'https://images.unsplash.com/photo-1503135935062-b7d1f5a0690f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=CF4D0C234ECD14F51A2343CC89B6C&dpr=1&auto=format&fit=crop&w=376&h=564&q=60&cs=tinysrgb'）无重复；
背景位置：中心；
背景尺寸：封面
}
div.main>div{
宽度：100px；
高度：320px；
背景：透明；
背景附件：固定；
边框顶部：25px实心橙色；
左边框：120px实心橙色；
边框底部：25px实心橙色；
右边框：10px实心橙色；
左边距：150像素
}

+1是一个好问题。是否必须在没有任何背景图像的情况下进行此设计？您可以使用SVG来实现此设计。如上所述，您最好使用透明图像，如gif、SVG或png图像。只需将div分层并将图像作为背景图像放置在CSS中即可。它干净整洁，很容易完成你想要的东西。@Michael:一点也不，无论什么都可以使这项工作干净、兼容。你希望它是透明的，因为你想显示标题后面的内容，还是仅仅希望在特定区域中具有相同的主体背景？浏览器支持：更多示例：答案中的链接为断开+1-非常好。我添加了一个JS小提琴演示。值得注意的是，

radial gradient

的浏览器支持并不完整，渐变的边缘看起来很粗糙（至少在Chrome中是这样），好像边缘没有alpha混合。啊，谢谢。当然，我也用jsfiddle进行了测试。只是忘记了链接事实上：这需要一些调整！附言：我添加了一个新的演示。看起来好多了…第二个圆圈隐藏了淘汰赛的粗糙边缘。非常好。我已经研究了三个小时了，这是到目前为止我发现的最好的一个。我在使用边界半径时发现了一个错误。形状：谢谢。这看起来比我的方法要好得多——我很懒——我使用了你的方法，并对它进行了一些改进。是的，谢谢，我一直在尝试解决这个问题，没有你的代码它就无法工作。我喜欢这个解决方案。这个网站必须有IE7+支持，我使用的浏览器测试工具告诉我它工作得很好。谢谢很高兴它起作用了。不过，IE7需要进行调整，因为它不支持

：before

和

：after

。我创建了一个同样适用于IE7的示例：

**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

}