我们一般采用photoshop等做图工具制作电视扫描线效果图片：首先做一个黑白相间的图案，然后用这个图案进行填充，再调整图层的模式或者透明度，效果就出来了。
现在我们不用photoshop，用css和javascript来做，方法也很简单！
步骤一、
我们先准备一张图片，以我的图片为例，命名为”青山绿水.jpg”，图片大小为1000X543。
步骤二、
在body内插入一个table表格，为表格设置class属性，值为”tvline”，设置表格的背景图片为事先准备的图片。
步骤三、
建立一个css样式，设置样式，代码为.tvline td{border-top:1px solid #fff;opacity:0.3;filer:alpha(opacity:60);} 注：浅色背景的图片建议用黑色的线#000，深色背景图片建议用白色的线#fff。IE不支持透明度，所以想要IE支持透明度的话用filter:alpha(opacity:60)设置即可。
步骤四、
在表格中插入一段javascript代码，切记是在表格内部插入代码，外部插入无效。
代码如下：
<script>
for(n=1;n<=100;n++){//循环的次数为图片高度的一半，或小于图片高度的一半
document.write("<tr><td> </td></tr>"); //td标签内部有一个半角空格
}
</script>
保存，完成，预览页面中的图片，效果如图：
完整的代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用代码"写"出扫描线效果图片</title>
<style>
table{
width:1000px;
height:543px;
background:url(青山绿水.jpg) no-repeat;
}
.tvline td{border-top:1px solid #fff;filter:alpha(opacity:40);opacity:.4;}
</style>
</head>
<body>
<table class="tvline">
<script>
for(n=1;n<=100;n++){
document.write("<tr><td> </td></tr>");
}
</script>
</table>
</body>
</html>