前言:不知道前段时间很火爆的背景透明广告你是否注意过,当时我第一次发现时就感到很新颖,理所当然广告效果很不错,不过当时是在手机上无聊刷新闻看见的,目前在pc上我还没有见过,或许有,或许没有,但我觉得我有必要将它分享出来。
首先,可能我们很多小伙伴还没有看过这个例子,所以先来看看我做的一个简单的效果图
怎么样,觉得效果还不错的继续往下看。
那么,我们怎么做这样一个效果呢?答案是很简单的,我们甚至不需要写js代码便可以实现这样一个酷炫的效果,我们只需要用到两个属性,opacity与background。
不着急的小伙伴可以先自己想一想如何实现,然后再看下面的代码解释。
首先我们需要写一个div,实现一个整体的布局。
效果很简单,就是一张图片而已。
注意,图片不是在打广告,自己随便去网上搜一张图片即可哦。
我们再在div下嵌套一个新闻的div,新闻div内再嵌套五个新闻版面。完整代码如下:
最后,到这就结束了,希望大家有所收获,有时候技术不在于精,而在于如何去应用。