使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

• 创建一个DIVonlayer ontop
• 插入一个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