CSS3 多背景图片淘汰滑门效果

对于支持 CSS3 规范的浏览器（在撰写本文时仅限 Safari），不再需要使用滑门技术来创建利用背景图像的水平扩展元素。 为单个元素分配多个背景图像的能力可以快速解决此问题。 分配一个定位到左侧的图像、一个重复的中间图像和一个定位到右侧的图像，如下所示

li.expanding {
	background: url('left.jpg') top left no-repeat,
			url('right.jpg') top right no-repeat,
			url('middle.jpg') top center repeat-x;	
	height: 40px;
	padding-top: 12px;
	padding-left: 12px;
	padding-right: 20px;
	float: left;
}

图像按声明顺序排列，因此最顶层的图像将是您声明的第一个图像。 换句话说，将重复图像声明为最后。 然后，您可以使用如下所示的简单列表标记

<ul>
	<li class="expanding">This</li>
	<li class="expanding">Little Piggy</li>
	<li class="expanding">Went To The Market</li>
</ul>

您将获得以下效果

非常流畅。

查看演示