我正在尝试在 HTML 中做这样的事情。它是一个页眉，位于页面的最顶部。棋盘区域必须是透明的。
如果不使用 15 个 div，我想不出一个好方法。
问问题
15354 次
5 回答
16
未来的选择
理想的情况是使用没有图像的单个元素。
尽管浏览器支持有限，但在这种情况下，屏蔽和/或剪辑会很有帮助。自从我第一次写这个答案以来，规范（如下）似乎确实取得了进展，所以这令人鼓舞。
实用方法
现在，我会选择基于图像的解决方案。它不需要很复杂。
我建议避免使用光栅图形，因为高密度显示器变得越来越普遍（几乎所有平板电脑/智能手机和 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 可以很好地用作背景图像。
于 2013-02-05T21:45:30.730 回答
7
可以使用 CSS-alpha 掩码：https ://caniuse.com/#feat=css-masks
更新 1
- 在上面创建一个
DIV层 - 插入
CANVAS- 元素。将黑色部分涂成黑色，其余部分应该是透明的。
更新 2
我很确定，如果不在旧版浏览器中使用带有 alpha 层的 PNG 图像，就无法创建此布局。
于 2013-02-05T21:46:24.987 回答
6
编辑：在@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
于 2013-02-05T22:18:16.637 回答
-1
**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
}
于 2018-01-31T07:26:10.207 回答