CSSで蛍光マーカー風な強調表示をする
この記事は以下の続編です。
mu2in.hatenablog.com
前回はCSS3のlinear-gradient()を使って蛍光ペン風の表現をしました。
今回は背景にBase64透過画像を使って、同じように再現できたのでご紹介します。
<style type="text/css"> /* 強調表示を蛍光ペン風に(画像版) */ article strong{ margin:0 0.1em; padding:0.1em 0.2em; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAJCAYAAADzRkbkAAAAEElEQVQIW2P8/TvkDCORBAB3fRvQcHDghQAAAABJRU5ErkJggg==); background-position:center bottom; background-repeat:repeat-x; } </style>
linear-gradient()版とBase64画像版の結果を比較する
⇒ 
CSS3のlinear-gradient()を非対応ブラウザでみると左のように表示されていました*1が、 今回の画像対応により、右のように蛍光マーカー風に表示されるようになりました。
画像を読み込むため表示が遅くなりますが、対応ブラウザが増えるのは良いですね。
おまけ：透過画像を作る
マーカー用の画像を作るのが面倒だったので、canvas要素+JavaScriptで黄色の透過画像を作ってみました。
違う色の透過画像を用意したいときに使ってみてください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script type="text/javascript"> window.onload = function(){ //canvasを生成 var canvas = document.createElement("canvas"); canvas.width = 1; canvas.height = 9; var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgba(252, 252, 84, 0.8)"; ctx.fillRect(0, 0, 1, 9); //base64に変換 var base64Canvas = canvas.toDataURL('image/png'); //canvasダウンロード用にaタグで囲む var a = document.createElement('a'); a.setAttribute('style','text-decoration:none;color:#222222;'); a.href = base64Canvas; a.download = "highlighter.png"; //strongタグの背景に指定 var strong = document.createElement('strong'); strong.textContent = base64Canvas; strong.setAttribute('style','font-size:16px;font-weight:bold;margin:0 .2em;padding:0.1em 0.2em;background-image:'+'url('+base64Canvas+');background-position:center bottom;background-repeat:repeat-x;'); a.appendChild(strong); document.body.appendChild(a); }; </script> </head> <body></body> </html>
