最近很火爆的透明广告在pc上的实现，解读你没用过的透明度。

前言：不知道前段时间很火爆的背景透明广告你是否注意过，当时我第一次发现时就感到很新颖，理所当然广告效果很不错，不过当时是在手机上无聊刷新闻看见的，目前在pc上我还没有见过，或许有，或许没有，但我觉得我有必要将它分享出来。

首先，可能我们很多小伙伴还没有看过这个例子，所以先来看看我做的一个简单的效果图

怎么样，觉得效果还不错的继续往下看。

那么，我们怎么做这样一个效果呢？答案是很简单的，我们甚至不需要写js代码便可以实现这样一个酷炫的效果，我们只需要用到两个属性，opacity与background。

不着急的小伙伴可以先自己想一想如何实现，然后再看下面的代码解释。

首先我们需要写一个div，实现一个整体的布局。

效果很简单，就是一张图片而已。

注意，图片不是在打广告，自己随便去网上搜一张图片即可哦。

我们再在div下嵌套一个新闻的div，新闻div内再嵌套五个新闻版面。完整代码如下：

有兴趣的可以去自己设置一下样式，改进的地方还有很多哦。

现在我们就需要在我们打广告的div里设置透明度了。

这样，效果就完全出来了，不过这时候你会发现一个问题，我们写在广告div里的广告词也消失了，很明显它也随着透明度的设置变得透明了，这个副作用我们是不想要的，那么我们怎么解决它呢? 我们首先想到在广告的div块里再嵌套一个用于显示文字的div，并且将它的透明度设置为1，结果是没有效果，这里解释一下为什么会没有效果，因为透明度的改变是基于它本身的的颜色透明度所决定的，也就是说，在父集透明度为0的情况下，子集的透明度的基础为0；那么无论它怎么改变，透明度都为零。 这个方法不行，那我们怎么解决呢？这个感兴趣的可以自己去试试方法。提示：父集不行可是试试兄弟集。

最后，到这就结束了，希望大家有所收获，有时候技术不在于精，而在于如何去应用。