用代碼“寫”出掃描線效果圖片

來源:互聯網
上載者:User
  我們一般採用photoshop等做圖工具製作電視掃描線效果圖片:首先做一個黑白相間的圖案,然後用這個圖案進行填充,再調整圖層的模式或者透明度,效果就出來了。

  現在我們不用photoshop,用css和Javascript來做,方法也很簡單!

  一、準備一張圖片,名為photo1.jpg,大小為:240x180;


  二、插入一個表格,表格長x寬設定為240x180,把cellpadding、cellspacing、border均設定為0,並把表格的背景設定為上面的圖片,即代碼為: <table cellpadding="0" cellspacing="0" border="0"
width="240" height="180" background="photo1.jpg">
</table>
  三、建立一個css樣式,把該樣式應用於上面的表格,樣式代碼如下。#000000代表黑色,你也可以換成其他你喜歡的顏色。後面的filter:alpha(opacity=30)是用css濾鏡調整細線的透明度。<BR><BR> .tvline td{border-top:1 solid #000000;font:1px;filter:alpha(opacity=30)} 四、在表格中插入一小段javascript代碼:
for(n=1;n')//注意td中間有一個全形空格; //document.write(' ') //考慮到瀏覽器的相容性,你也可以使用上面這一句
  整個頁面的代碼如下:
.tvline td{border-top:1 solid #000000;font:1px;filter:alpha(opacity=30)} for(n=1;n')
  現在儲存頁面,預覽一下效果吧:

相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

11.11 Big Sale for Cloud

Get Unbeatable Offers with up to 90% Off,Oct.24-Nov.13 (UTC+8)

Get It Now >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。