使一部分的div透明 [英] Making part of a div transparent

问题描述

在HTML中做这样的事情。它是一个标题，在页面的最顶部。棋盘区域必须是透明的。

我不能想像一个好办法，不使用像15 divs。

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

在这种情况下，屏蔽和/或裁剪会很有用，尽管浏览器支持有限。

• =http://www.w3.org/TR/css-masking/ =nofollow noreferrer> 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 / （替换：之前和：在后添加额外元素）。
  

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可以很好地用作背景图片。

I'm trying to do something like this in HTML. It's a header, at the very top of the page. The checkerboard area must be transparent.

I can't think of a good way to do this without using like 15 divs.

解决方案

Future Options

The ideal scenario would be to use a single element with no images.

Masking and/or clipping would be helpful in situations like this, though browser support is limited. It does seem that progress has been made on the spec (below) since I first wrote this answer, so that's encouraging.

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

Practical Approach

For now, I would go with an image-based solution. It doesn't need to be complex.

I recommend avoiding raster graphics since high-density displays are becoming more and more common (nearly every tablet/smartphone and 4K PC monitors). To accomplish this, SVG will work in most modern browsers and PNG can be used as a fallback.

Demos

• Here's a demo using a PNG: http://jsfiddle.net/MxspA/6/.
• Same demo with IE7 support: http://jsfiddle.net/MxspA/9/ (replaces :before and :after with extra elements).

Source for IE8+ Version

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

Images

Here's a transparent PNG to get you started. Someone with basic Adobe Illustrator skills could recreate this as an SVG image, providing the aforementioned high resolution capabilities. An SVG will work nicely as a background image.

这篇关于使一部分的div透明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！