常常在網頁中看到這個屬性，檢視網頁發現不會顯示，好奇查了一下資料，原因它是指「screen reader only」，也就是設計給螢幕閱讀器讀取的屬性，一般的瀏覽器不會顯示，長知識了！
[程式] 點一下圖片，黑白瞬間變彩色
2020年8月24日 星期一
夥伴傳來一個連結，打開後，裡面的多張黑白(灰階)圖片，按一下圖片後，就會慢慢轉成彩色，所以覺得很療癒。
不過，我想了一下，想試著把它的動作還原，整理以下思路：
- 一開始把頁面中的圖片都設成灰階
- 設定每個圖片監聽 click 事件
- 圖片被點擊後，取消灰階
- (opt)取消灰階後，用 fadeIn 讓圖片浮現
試了一下，果然可行，其中的關鍵字：
- css
- filter
- grayscale
以下是我簡單做的範例程式，提供參考囉！
[網頁設計] 分頁設定
2015年4月24日 星期五
強制將網頁內容於列印時做分頁的動作，如果不喜歡多一條橫槓，可以把 pagebreak 設為隱藏( visibility: hidden; )。
----------範例網頁-------------------------------------------------------
----------範例網頁-------------------------------------------------------
<head>
<style>.pagebreak
{ page-break-before: always; } </style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<hr class="pagebreak" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
訂閱：
文章 (Atom)