&nbs p;
一、看看是什么样子的广告交互效果
夏日炎炎，今天宅在家里刷微博的时候，刷到了个关于信息流广告的视频：
究竟这个广告是个什么样子的呢，可以参见下面的视频：
这个广告其实还好啦，跟着滚和不跟着滚的区别嘛~不过，作为满脑子都是技术的瘦宅，第一反应就是：这个广告效果使用web前端技术该怎么实现？
几个idea试验了下，发现都可以实现类似的效果，一起来看看吧。
二、一行background-attachment:fixed搞定镂空信息流广告
这个方法理论上是最简单效果也最好的方法。
CSS 中有个 background-attachment 属性，当我们设置属性值为 fixed 的时候，背景图片相对于窗体定位，不受滚动影响。
于是，我们的实现就很 简单 ：信息流列表 HTML 中插入个广告 <a> 链接，然后广告图作为背景图呈现，设置 background-attachment:fixed 效果就可以实现了，就这么简单。
HT ML 和CSS代码示意：
<div class="list">信息流列表1</div> <div class="list">信息流列表2</div> <a hr ef=" # " class="ad" t arg et="_blank">广告</a> <div class="list">信息流列表3</div> <div class="list">信息流列表4</div>
.ad { dis play : block; h ei ght: 600px; background: url(./ad. jpg ) no-re PE at top fixed; background-size : 100%; } 眼见为实，您可以狠狠地点击这里：基于backgroud实现的信息流广告demo
或者 手机扫下面的码体验：
效果大致如下GIF 截屏 ：
@H_ 512 _36@
fnGifAdBgError=function( img , id) {img.style.display='none'; VAR eleVideoAdBg = document.getElementById(id);if (eleVideoAdBg){eleVideoAdBg.src=eleVideoAdBg.getAttribute('srcload');eleVideoAdBg. classname ='';}};
唯一的不足：iOS Safari不支持background-attachment:fixed
iOS Safari很早时候 pos IT ion:fixed 也不支持，后来妥协了，支持了；但是 background-attachment:fixed 还是老样子，不支持，怕是嫌弃 background-attachment:fixed 烧性能，对于一个连IE6，IE7浏览器都支持良好的CSS声明，Safari不支持（包括iOS微信），我也无力说些什么。
因此，我们还需要额外做些功夫，兼容下iPhone手机浏览器。
我的做法是如果是iPhone手机，广告图片 postion:fixed 定位，配合JS实时 clip 剪裁。核心JS如下：
// ele就是广告元素DOM对象 window.addEventListener('scroll', function () { var bound = ele.parentElement.getBoundingClientRect(); var clip = 'rect('+ [bound.top + 'px', ele.parentElement.clientWidth + 'px', bound.bottom + 'px', 0].join() +')'; ele.style.clip = clip; }); 补充于翌日
经反馈，我查了下浏览器兼容性资料，发现And ROI d4.4+版本 开始 ， 放弃 了对 background-attachment:fixed 的支持，但是Android Ch rom e浏览器却支持，这有些令人不解（见下图）。
我用家里人的Android手机测试，背景效果表现为 scroll ，看来JS 补丁 要多个Android设备。
三、position:fixed也可以实现藏 在后 面的信息流广告
position:fixed 也可以实现藏在后面的信息流广告， 实现原理 就是藏在其他信息流元素的背后，以及头部或者底部元素（如果有）的底部，关键就是 z -i ndex 层级控制了。虽然原理简单，但是实际操作还是有些啰嗦的，通常信息流页面的HTML结构都比较复杂，此时再 z-index 属性各种设置，很容易造成 z-index 混乱。
我也花时间做了个demo，您可以狠狠地点击这里：position:fixed实现的信息流广告demo
或者手机扫下面的码体验：
效果大致如下GIF截屏：
HTML和CSS代码原理示意：
<div class="list">信息流列表1</div> <div class="list">信息流列表2</div> <a href="#" class="ad" target="_blank"> <img src="./ad.jpg"> </a> <div class="list">信息流列表3</div> <div class="list">信息流列表4</div>
.list { background-color: #fff; position: relative; z-index: 1; } .ad { display: block; height: 576px; } .ad img { position: fixed; top: 0; width: 400px; } 优点和不足 基于 position:fixed 实现的优点在于：
1. 我们的广告内容可以支持复杂HTML，而不仅仅是一张图片；
2. 所有浏览器都兼容，包括iPhone Safari浏览器。
不足在于：
1. 需要其他元素进行层级配合，相互耦合增加了CSS的复杂度。
如果实际开发时候发现 z-index 层级控制比较麻烦，可以试试第一个demo中使用的CSS clip 剪裁，直接只显示当前广告区域内容， 不过 需要JS配合，不是纯CSS实现了，自己权衡。
四、结束语
采用 position:fixed 固定定位实现的时候，我们还可以把广告元素从信息流列表中抽离，直接放在整个容器的后面，然后借助 visibility 属性实现点击穿透，如下示意：
<a href="#" class="ad">广告</a> <ul> <li>信息流列表1</li> <li>信息流列表2</li> <li></li> <!-- 撑开高度 --> <li>信息流列表3</li> <li>信息流列表4</li> </ul>
.ad { position: fixed; } ul { position: relative; visibility: hidden; } li:empty { /* 撑开高度，实际开发请使用类名控制，这里精简HTML才使用:empty */ height: 576px; } li:not(:empty) { visibility: visible; } 具体就不展开了。
英格兰凉了，比利时很强。
希望本文内容可以帮助需要的人。
然后，如果你有更好地实现方法，欢迎不吝赐教！
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-一行CSS实现滚动时藏在信息流后面的广告效果 全部内容，希望文章能够帮你解决 html5教程-一行CSS实现滚动时藏在信息流后面的广告效果 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-一行CSS实现滚动时藏在信息流后面的广告效果的详细内容...