backgroud实现的信息流广告效果实例页面

展示

占位示例图片，信息流效果演示用。

占位示例图片，本信息流广告效果使用background-attachment:fixed实现。

占位示例图片，此方法HTML内容自然内嵌，对其他元素布局几乎无干扰。

占位示例图片，只需一行CSS即可实现，唯一问题iOS Safari浏览器不支持。

代码

CSS代码：

.list {
    margin: 8px 0; 
    padding: 16px; 
    background-color: #fff;
}
.adsense {
    display: block;
    height: 576px;
    background: #7069f5 url(./ad.jpg) no-repeat top fixed;
    background-size: 432px;
    color: transparent;
}

HTML代码：

<div class="list">
    <p>占位示例图片...。</p>
    <p><img src="./mm1.jpg"></p>
</div>
<div class="list">
    <p>占位示例图片...</p>
    <p><img src="./mm6.jpg"></p>
</div>
<a href="#" class="adsense" target="_blank">CSS世界京东</a>
<div class="list">
    <p>占位示例图片，...</p>
    <p><img src="./mm3.jpg"></p>
</div>
<div class="list">
    <p>占位示例图片...</p>
    <p><./mm4.jpg"></p>
</div>