下面的斑马线背景是与文本紧密结构的一种背景图案
实现这种效果，你可以给每一行套元素，然后再添加背景。
不过还有更便捷的另一种方法：给整个元素设置统一的背景图像，然后一次性加上所有的斑马条纹。
linear-gradient() 函数用于创建一个线性渐变的 "图像"。
为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。
beige 浅褐色的; 米黄色的; linear-gradient(rgba(0,0,0,0.2) 50% 百分之50渐变
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
pre {
width: 500px;
height: 252px;
padding: .5em;
line-height: 1.5;
background: beige linear-gradient(rgba(0,0,0,0.2) 50%,transparent 0) content-box 0 0/ auto 3em;
}
</style>
</head>
<body>
<div class="dd">
<pre>
// 获得当前被点击li的序号
t=$(this).index();
// 计算大div应该到达的lfet值
var left = t*-750;
$('#tm .dk').stop().animate({'left':left+'px'},300);
// stop()消除叠加运动
// $('#tm .dk').stop().animate({'left':left+'px'},300,functon(){
// 解决定时器和点击效果冲突 方法(一) 2、用回调函数来恢复定时器 可以在执行完前面运动的300毫秒后,再执行回调函数里的内容
// dsq = setInterval(hs,1000);
// });
// 让当前被点击的li透明度变为0.8,兄弟li透明度变为0.6
</pre>
</div>
</body>
</html>
原文链接：https://www.qiquanji.com/post/8699.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知