(原創) 使用CSS畫圖 (Web) (CSS)
Abstract
CSS只能做對HTML排版嗎?竟然有人拿CSS來畫圖了!!
Introduction
<div style="margin: 0px auto; width: 400px">
<iframe id="canvas" style="margin: 0px auto; width: 400px; height: 490px" frameborder="0" scrolling="no"></iframe>
</div>
<script type="text/javascript">
var ifrm = document.getElementById('canvas');
ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write(
'<div style="width: 100%; height: 466px;">' +
'<div style="border: 2px solid #000000; float: left; line-height: normal; background-color: #ffffff;">' +
'<div style="overflow: hidden; width: 6.23em; height: 7.7em; font-family: Verdana; font-size: 60px;">' +
'<div style="margin-top: -0.7em;">' +
'<div style="position: absolute; padding-left: 1.56em; padding-top: 0.37em;">' +
'<div style="font-size: 2.57em; font-weight: bold; color: #000000;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.62em; padding-top: 0.53em;">' +
'<div style="font-size: 2.38em; font-weight: bold; color: #ffffff;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.2em; padding-top: 0.67em;">' +
'<div style="font-size: 2.48em; color: #000000;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.29em; padding-top: 0.85em;">' +
'<div style="font-size: 2.23em; color: #ffffff;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.57em; padding-top: 2.03em;">' +
'<div style="width: 0.32em; height: 0.52em; background-color: #ffffff;"></div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.52em; padding-top: 1.56em;">' +
'<div style="font-size: 0.8em; font-style: italic; color: #000000;">(</div>' +
'</div>' +
'<div style="color: #000000;">' +
'<div style="position: absolute; padding-left: 1.07em; padding-top: 0.62em;">' +
'<div style="font-size: 4.57em;">O</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.05em; padding-top: 1.15em;">' +
'<div style="font-size: 3.53em;">O</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.12em; padding-top: 0.74em;">' +
'<div style="font-size: 4.63em;">O</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.08em; padding-top: 3.64em;">' +
'<div style="font-size: 1.77em; font-weight: bold; font-style: italic;">\</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.17em; padding-top: 4.8em;">' +
'<div style="font-size: 3.29em; font-weight: bold; font-style: italic;">L</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.14em; padding-top: 5.21em;">' +
'<div style="overflow: hidden; font-size: 3.01em; font-weight: bold; font-style: italic; height: 0.96em;">(</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 4.13em; padding-top: 3.23em;">' +
'<div style="font-size: 0.7em; font-weight: bold;">O</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.37em; padding-top: 5.08em;">' +
'<div style="font-size: 0.97em; font-weight: bold;">O</div>' +
'</div>' +
'</div>' +
'<div style="color: #fed90e;">' +
'<div style="position: absolute; padding-left: 1.15em; padding-top: 0.76em;">' +
'<div style="font-size: 4.37em;">O</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.14em; padding-top: 1.26em;">' +
'<div style="font-size: 3.37em;">O</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.2em; padding-top: 0.87em;">' +
'<div style="font-size: 4.42em;">O</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.15em; padding-top: 3.61em;">' +
'<div style="font-size: 1.7em; font-weight: bold; font-style: italic;">\</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.24em; padding-top: 4.93em;">' +
'<div style="font-size: 3.18em; font-weight: bold; font-style: italic;">L</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.03em; padding-top: 5.05em;">' +
'<div style="overflow: hidden; font-size: 3.2em; font-weight: bold; font-style: italic; height: 0.96em;">(</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 4.18em; padding-top: 3.34em;">' +
'<div style="font-size: 0.55em; font-weight: bold;">O</div>' +
'</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.84em; padding-top: 2.37em;">' +
'<div style="width: 1.92em; height: 5.76em; background-color: #fed90e;"></div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.7em; padding-top: 2.73em;">' +
'<div style="width: 0.3em; height: 1.56em; background-color: #fed90e;"></div>' +
'</div>' +
'<div style="position: absolute; padding-left: 4.36em; padding-top: 3.51em;">' +
'<div style="width: 0.16em; height: 0.34em; background-color: #fed90e;"></div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.62em; padding-top: 5.47em;">' +
'<div style="font-size: 10px;">' +
'<div style="width: 2.6em; height: 3em; background-color: #fed90e;"></div>' +
'</div>' +
'</div>' +
'<div style="color: #000000;">' +
'<div style="position: absolute; padding-left: 1.23em; padding-top: 4.57em;">' +
'<div style="font-size: 0.67em;">|</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.23em; padding-top: 4.37em;">' +
'<div style="font-size: 0.67em;">|</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.34em; padding-top: 4.37em;">' +
'<div style="font-size: 0.67em;">\</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.4em; padding-top: 4.53em;">' +
'<div style="font-size: 0.67em;">\</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.55em; padding-top: 4.49em;">' +
'<div style="font-size: 0.67em;">|</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.55em; padding-top: 4.19em;">' +
'<div style="font-size: 0.67em;">|</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.66em; padding-top: 4.19em;">' +
'<div style="font-size: 0.67em;">\</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.76em; padding-top: 4.45em;">' +
'<div style="font-size: 0.67em;">\</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.27em; padding-top: 2.54em;">' +
'<div style="font-size: 0.42em; font-weight: bold; font-style: italic;">\</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.51em; padding-top: 2.18em;">' +
'<div style="font-size: 0.42em; font-weight: bold; font-style: italic;">\</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.31em; padding-top: 5.32em;">' +
'<div style="font-size: 1.47em; font-weight: bold; font-style: italic;">(</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.29em; padding-top: 5.69em;">' +
'<div style="font-size: 1.11em; font-weight: bold;">(</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.92em; padding-top: 4.72em;">' +
'<div style="font-size: 2.4em; font-weight: bold;">8</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.43em; padding-top: 3.96em;">' +
'<div style="font-size: 3.13em; font-weight: bold; font-style: italic;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.31em; padding-top: 4.05em;">' +
'<div style="font-size: 3.13em; font-weight: bold; font-style: italic;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.33em; padding-top: 4.37em;">' +
'<div style="font-size: 3.06em; font-weight: bold;">o</div>' +
'</div>' +
'</div>' +
'<div style="color: #cdb26f;">' +
'<div style="position: absolute; padding-left: 2.39em; padding-top: 5.36em;">' +
'<div style="font-size: 1.38em; font-weight: bold; font-style: italic;">(</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.37em; padding-top: 5.75em;">' +
'<div style="font-size: 1.04em; font-weight: bold;">(</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.95em; padding-top: 4.82em;">' +
'<div style="font-size: 2.25em; font-weight: bold;">8</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.49em; padding-top: 4.15em;">' +
'<div style="font-size: 2.93em; font-weight: bold; font-style: italic;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.39em; padding-top: 4.22em;">' +
'<div style="font-size: 2.93em; font-weight: bold; font-style: italic;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.4em; padding-top: 4.5em;">' +
'<div style="font-size: 2.87em; font-weight: bold;">o</div>' +
'</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.98em; padding-top: 6.09em;">' +
'<div style="width: 0.76em; height: 1em; background-color: #cdb26f;"></div>' +
'</div>' +
'<div style="color: #000000;">' +
'<div style="position: absolute; padding-left: 3.69em; padding-top: 4.28em;">' +
'<div style="font-size: 2.2em;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 4.62em; padding-top: 5.42em;">' +
'<div style="font-size: 1.01em;">)</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 4.78em; padding-top: 5.72em;">' +
'<div style="font-size: 0.72em;">)</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 4.53em; padding-top: 5.65em;">' +
'<div style="font-size: 0.94em;">b</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 4em; padding-top: 5.09em;">' +
'<div style="font-size: 1.59em; font-weight: bold;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.33em; padding-top: 4.79em;">' +
'<div style="font-size: 1.95em; font-weight: bold;">O</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.15em; padding-top: 4.3em;">' +
'<div style="font-size: 2.42em; font-weight: bold;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.01em; padding-top: 4.46em;">' +
'<div style="font-size: 2.23em; font-weight: bold;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.88em; padding-top: 4.43em;">' +
'<div style="font-size: 2.23em; font-weight: bold;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.81em; padding-top: 4.71em;">' +
'<div style="font-size: 1.9em; font-weight: bold;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.69em; padding-top: 4.74em;">' +
'<div style="font-size: 1.97em; font-weight: bold;">o</div>' +
'</div>' +
'</div>' +
'<div style="color: #cdb26f;">' +
'<div style="position: absolute; padding-left: 3.7em; padding-top: 4.4em;">' +
'<div style="font-size: 2.06em;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 4.57em; padding-top: 5.44em;">' +
'<div style="font-size: 0.95em;">)</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 4.49em; padding-top: 5.66em;">' +
'<div style="font-size: 0.88em;">b</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 4.01em; padding-top: 5.14em;">' +
'<div style="font-size: 1.48em; font-weight: bold;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.37em; padding-top: 4.84em;">' +
'<div style="font-size: 1.83em; font-weight: bold;">O</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.21em; padding-top: 4.38em;">' +
'<div style="font-size: 2.27em; font-weight: bold;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.07em; padding-top: 4.54em;">' +
'<div style="font-size: 2.09em; font-weight: bold;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.95em; padding-top: 4.53em;">' +
'<div style="font-size: 2.08em; font-weight: bold;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.88em; padding-top: 4.78em;">' +
'<div style="font-size: 1.78em; font-weight: bold;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.71em; padding-top: 4.79em;">' +
'<div style="font-size: 1.85em; font-weight: bold;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.87em; padding-top: 4.59em;">' +
'<div style="font-size: 1.93em; font-weight: bold;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.09em; padding-top: 4.55em;">' +
'<div style="font-size: 1.93em; font-weight: bold;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.73em; padding-top: 5.03em;">' +
'<div style="font-size: 1.44em; font-weight: bold;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.59em; padding-top: 5.77em;">' +
'<div style="font-size: 0.82em; font-weight: bold;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.04em; padding-top: 6.4em;">' +
'<div style="font-size: 0.16em; font-weight: bold; font-style: italic; color: #000000;">/</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.03em; padding-top: 6.4em;">' +
'<div style="font-size: 0.16em; font-weight: bold; font-style: italic; color: #000000;">/</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.02em; padding-top: 6.4em;">' +
'<div style="font-size: 0.16em; font-weight: bold; font-style: italic; color: #000000;">/</div>' +
'</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.24em; padding-top: 2.49em;">' +
'<div style="font-size: 2.76em; font-weight: bold; color: #000000;">•</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.34em; padding-top: 2.68em;">' +
'<div style="font-size: 2.49em; font-weight: bold; color: #ffffff;">•</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 4.2em; padding-top: 4.26em;">' +
'<div style="font-size: 0.28em; font-weight: bold; color: #000000;">•</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.9em; padding-top: 4.05em;">' +
'<div style="font-size: 1.47em; font-weight: bold; color: #000000;">•</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.99em; padding-top: 4.23em;">' +
'<div style="font-size: 1.2em; font-weight: bold; color: #fed90e;">•</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.66em; padding-top: 4.7em;">' +
'<div style="font-size: 10px;">' +
'<div style="width: 4.6em; height: 3.88em; background-color: #fed90e;"></div>' +
'</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.68em; padding-top: 3.36em;">' +
'<div style="font-size: 1.2em; color: #000000;">_</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.68em; padding-top: 4.03em;">' +
'<div style="font-size: 1.2em; color: #000000;">_</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.64em; padding-top: 4.03em;">' +
'<div style="font-size: 1.2em; color: #000000;">_</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.96em; padding-top: 2.33em;">' +
'<div style="font-size: 3.04em; font-weight: bold; color: #000000;">•</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.06em; padding-top: 2.5em;">' +
'<div style="font-size: 2.77em; font-weight: bold; color: #ffffff;">•</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.67em; padding-top: 4.23em;">' +
'<div style="font-size: 0.28em; font-weight: bold; color: #000000;">•</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.46em; padding-top: 5.18em;">' +
'<div style="font-size: 0.66em; color: #000000;">C</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.47em; padding-top: 5.4em;">' +
'<div style="font-size: 0.66em; color: #000000;">C</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.62em; padding-top: 5.53em;">' +
'<div style="font-size: 10px;">' +
'<div style="width: 2.2em; height: 2.2em; background-color: #fed90e;"></div>' +
'</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.45em; padding-top: 5.19em;">' +
'<div style="font-size: 0.8em; font-weight: bold; color: #fed90e;">O</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.58em; padding-top: 5.47em;">' +
'<div style="font-size: 0.25em; font-weight: bold; font-style: italic; color: #000000;">(</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.62em; padding-top: 5.46em;">' +
'<div style="font-size: 0.25em; font-weight: bold; font-style: italic; color: #000000;">-</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>');
ifrm.document.close();
</script>
<iframe id="canvas" style="margin: 0px auto; width: 400px; height: 490px" frameborder="0" scrolling="no"></iframe>
</div>
<script type="text/javascript">
var ifrm = document.getElementById('canvas');
ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write(
'<div style="width: 100%; height: 466px;">' +
'<div style="border: 2px solid #000000; float: left; line-height: normal; background-color: #ffffff;">' +
'<div style="overflow: hidden; width: 6.23em; height: 7.7em; font-family: Verdana; font-size: 60px;">' +
'<div style="margin-top: -0.7em;">' +
'<div style="position: absolute; padding-left: 1.56em; padding-top: 0.37em;">' +
'<div style="font-size: 2.57em; font-weight: bold; color: #000000;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.62em; padding-top: 0.53em;">' +
'<div style="font-size: 2.38em; font-weight: bold; color: #ffffff;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.2em; padding-top: 0.67em;">' +
'<div style="font-size: 2.48em; color: #000000;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.29em; padding-top: 0.85em;">' +
'<div style="font-size: 2.23em; color: #ffffff;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.57em; padding-top: 2.03em;">' +
'<div style="width: 0.32em; height: 0.52em; background-color: #ffffff;"></div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.52em; padding-top: 1.56em;">' +
'<div style="font-size: 0.8em; font-style: italic; color: #000000;">(</div>' +
'</div>' +
'<div style="color: #000000;">' +
'<div style="position: absolute; padding-left: 1.07em; padding-top: 0.62em;">' +
'<div style="font-size: 4.57em;">O</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.05em; padding-top: 1.15em;">' +
'<div style="font-size: 3.53em;">O</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.12em; padding-top: 0.74em;">' +
'<div style="font-size: 4.63em;">O</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.08em; padding-top: 3.64em;">' +
'<div style="font-size: 1.77em; font-weight: bold; font-style: italic;">\</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.17em; padding-top: 4.8em;">' +
'<div style="font-size: 3.29em; font-weight: bold; font-style: italic;">L</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.14em; padding-top: 5.21em;">' +
'<div style="overflow: hidden; font-size: 3.01em; font-weight: bold; font-style: italic; height: 0.96em;">(</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 4.13em; padding-top: 3.23em;">' +
'<div style="font-size: 0.7em; font-weight: bold;">O</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.37em; padding-top: 5.08em;">' +
'<div style="font-size: 0.97em; font-weight: bold;">O</div>' +
'</div>' +
'</div>' +
'<div style="color: #fed90e;">' +
'<div style="position: absolute; padding-left: 1.15em; padding-top: 0.76em;">' +
'<div style="font-size: 4.37em;">O</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.14em; padding-top: 1.26em;">' +
'<div style="font-size: 3.37em;">O</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.2em; padding-top: 0.87em;">' +
'<div style="font-size: 4.42em;">O</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.15em; padding-top: 3.61em;">' +
'<div style="font-size: 1.7em; font-weight: bold; font-style: italic;">\</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.24em; padding-top: 4.93em;">' +
'<div style="font-size: 3.18em; font-weight: bold; font-style: italic;">L</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.03em; padding-top: 5.05em;">' +
'<div style="overflow: hidden; font-size: 3.2em; font-weight: bold; font-style: italic; height: 0.96em;">(</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 4.18em; padding-top: 3.34em;">' +
'<div style="font-size: 0.55em; font-weight: bold;">O</div>' +
'</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.84em; padding-top: 2.37em;">' +
'<div style="width: 1.92em; height: 5.76em; background-color: #fed90e;"></div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.7em; padding-top: 2.73em;">' +
'<div style="width: 0.3em; height: 1.56em; background-color: #fed90e;"></div>' +
'</div>' +
'<div style="position: absolute; padding-left: 4.36em; padding-top: 3.51em;">' +
'<div style="width: 0.16em; height: 0.34em; background-color: #fed90e;"></div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.62em; padding-top: 5.47em;">' +
'<div style="font-size: 10px;">' +
'<div style="width: 2.6em; height: 3em; background-color: #fed90e;"></div>' +
'</div>' +
'</div>' +
'<div style="color: #000000;">' +
'<div style="position: absolute; padding-left: 1.23em; padding-top: 4.57em;">' +
'<div style="font-size: 0.67em;">|</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.23em; padding-top: 4.37em;">' +
'<div style="font-size: 0.67em;">|</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.34em; padding-top: 4.37em;">' +
'<div style="font-size: 0.67em;">\</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.4em; padding-top: 4.53em;">' +
'<div style="font-size: 0.67em;">\</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.55em; padding-top: 4.49em;">' +
'<div style="font-size: 0.67em;">|</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.55em; padding-top: 4.19em;">' +
'<div style="font-size: 0.67em;">|</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.66em; padding-top: 4.19em;">' +
'<div style="font-size: 0.67em;">\</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.76em; padding-top: 4.45em;">' +
'<div style="font-size: 0.67em;">\</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.27em; padding-top: 2.54em;">' +
'<div style="font-size: 0.42em; font-weight: bold; font-style: italic;">\</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.51em; padding-top: 2.18em;">' +
'<div style="font-size: 0.42em; font-weight: bold; font-style: italic;">\</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.31em; padding-top: 5.32em;">' +
'<div style="font-size: 1.47em; font-weight: bold; font-style: italic;">(</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.29em; padding-top: 5.69em;">' +
'<div style="font-size: 1.11em; font-weight: bold;">(</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.92em; padding-top: 4.72em;">' +
'<div style="font-size: 2.4em; font-weight: bold;">8</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.43em; padding-top: 3.96em;">' +
'<div style="font-size: 3.13em; font-weight: bold; font-style: italic;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.31em; padding-top: 4.05em;">' +
'<div style="font-size: 3.13em; font-weight: bold; font-style: italic;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.33em; padding-top: 4.37em;">' +
'<div style="font-size: 3.06em; font-weight: bold;">o</div>' +
'</div>' +
'</div>' +
'<div style="color: #cdb26f;">' +
'<div style="position: absolute; padding-left: 2.39em; padding-top: 5.36em;">' +
'<div style="font-size: 1.38em; font-weight: bold; font-style: italic;">(</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.37em; padding-top: 5.75em;">' +
'<div style="font-size: 1.04em; font-weight: bold;">(</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.95em; padding-top: 4.82em;">' +
'<div style="font-size: 2.25em; font-weight: bold;">8</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.49em; padding-top: 4.15em;">' +
'<div style="font-size: 2.93em; font-weight: bold; font-style: italic;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.39em; padding-top: 4.22em;">' +
'<div style="font-size: 2.93em; font-weight: bold; font-style: italic;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.4em; padding-top: 4.5em;">' +
'<div style="font-size: 2.87em; font-weight: bold;">o</div>' +
'</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.98em; padding-top: 6.09em;">' +
'<div style="width: 0.76em; height: 1em; background-color: #cdb26f;"></div>' +
'</div>' +
'<div style="color: #000000;">' +
'<div style="position: absolute; padding-left: 3.69em; padding-top: 4.28em;">' +
'<div style="font-size: 2.2em;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 4.62em; padding-top: 5.42em;">' +
'<div style="font-size: 1.01em;">)</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 4.78em; padding-top: 5.72em;">' +
'<div style="font-size: 0.72em;">)</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 4.53em; padding-top: 5.65em;">' +
'<div style="font-size: 0.94em;">b</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 4em; padding-top: 5.09em;">' +
'<div style="font-size: 1.59em; font-weight: bold;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.33em; padding-top: 4.79em;">' +
'<div style="font-size: 1.95em; font-weight: bold;">O</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.15em; padding-top: 4.3em;">' +
'<div style="font-size: 2.42em; font-weight: bold;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.01em; padding-top: 4.46em;">' +
'<div style="font-size: 2.23em; font-weight: bold;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.88em; padding-top: 4.43em;">' +
'<div style="font-size: 2.23em; font-weight: bold;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.81em; padding-top: 4.71em;">' +
'<div style="font-size: 1.9em; font-weight: bold;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.69em; padding-top: 4.74em;">' +
'<div style="font-size: 1.97em; font-weight: bold;">o</div>' +
'</div>' +
'</div>' +
'<div style="color: #cdb26f;">' +
'<div style="position: absolute; padding-left: 3.7em; padding-top: 4.4em;">' +
'<div style="font-size: 2.06em;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 4.57em; padding-top: 5.44em;">' +
'<div style="font-size: 0.95em;">)</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 4.49em; padding-top: 5.66em;">' +
'<div style="font-size: 0.88em;">b</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 4.01em; padding-top: 5.14em;">' +
'<div style="font-size: 1.48em; font-weight: bold;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.37em; padding-top: 4.84em;">' +
'<div style="font-size: 1.83em; font-weight: bold;">O</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.21em; padding-top: 4.38em;">' +
'<div style="font-size: 2.27em; font-weight: bold;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.07em; padding-top: 4.54em;">' +
'<div style="font-size: 2.09em; font-weight: bold;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.95em; padding-top: 4.53em;">' +
'<div style="font-size: 2.08em; font-weight: bold;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.88em; padding-top: 4.78em;">' +
'<div style="font-size: 1.78em; font-weight: bold;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.71em; padding-top: 4.79em;">' +
'<div style="font-size: 1.85em; font-weight: bold;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.87em; padding-top: 4.59em;">' +
'<div style="font-size: 1.93em; font-weight: bold;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.09em; padding-top: 4.55em;">' +
'<div style="font-size: 1.93em; font-weight: bold;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.73em; padding-top: 5.03em;">' +
'<div style="font-size: 1.44em; font-weight: bold;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.59em; padding-top: 5.77em;">' +
'<div style="font-size: 0.82em; font-weight: bold;">o</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.04em; padding-top: 6.4em;">' +
'<div style="font-size: 0.16em; font-weight: bold; font-style: italic; color: #000000;">/</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.03em; padding-top: 6.4em;">' +
'<div style="font-size: 0.16em; font-weight: bold; font-style: italic; color: #000000;">/</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.02em; padding-top: 6.4em;">' +
'<div style="font-size: 0.16em; font-weight: bold; font-style: italic; color: #000000;">/</div>' +
'</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.24em; padding-top: 2.49em;">' +
'<div style="font-size: 2.76em; font-weight: bold; color: #000000;">•</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.34em; padding-top: 2.68em;">' +
'<div style="font-size: 2.49em; font-weight: bold; color: #ffffff;">•</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 4.2em; padding-top: 4.26em;">' +
'<div style="font-size: 0.28em; font-weight: bold; color: #000000;">•</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.9em; padding-top: 4.05em;">' +
'<div style="font-size: 1.47em; font-weight: bold; color: #000000;">•</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.99em; padding-top: 4.23em;">' +
'<div style="font-size: 1.2em; font-weight: bold; color: #fed90e;">•</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.66em; padding-top: 4.7em;">' +
'<div style="font-size: 10px;">' +
'<div style="width: 4.6em; height: 3.88em; background-color: #fed90e;"></div>' +
'</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.68em; padding-top: 3.36em;">' +
'<div style="font-size: 1.2em; color: #000000;">_</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.68em; padding-top: 4.03em;">' +
'<div style="font-size: 1.2em; color: #000000;">_</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 3.64em; padding-top: 4.03em;">' +
'<div style="font-size: 1.2em; color: #000000;">_</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.96em; padding-top: 2.33em;">' +
'<div style="font-size: 3.04em; font-weight: bold; color: #000000;">•</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.06em; padding-top: 2.5em;">' +
'<div style="font-size: 2.77em; font-weight: bold; color: #ffffff;">•</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 2.67em; padding-top: 4.23em;">' +
'<div style="font-size: 0.28em; font-weight: bold; color: #000000;">•</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.46em; padding-top: 5.18em;">' +
'<div style="font-size: 0.66em; color: #000000;">C</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.47em; padding-top: 5.4em;">' +
'<div style="font-size: 0.66em; color: #000000;">C</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.62em; padding-top: 5.53em;">' +
'<div style="font-size: 10px;">' +
'<div style="width: 2.2em; height: 2.2em; background-color: #fed90e;"></div>' +
'</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.45em; padding-top: 5.19em;">' +
'<div style="font-size: 0.8em; font-weight: bold; color: #fed90e;">O</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.58em; padding-top: 5.47em;">' +
'<div style="font-size: 0.25em; font-weight: bold; font-style: italic; color: #000000;">(</div>' +
'</div>' +
'<div style="position: absolute; padding-left: 1.62em; padding-top: 5.46em;">' +
'<div style="font-size: 0.25em; font-weight: bold; font-style: italic; color: #000000;">-</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>');
ifrm.document.close();
</script>
執行結果
若你不相信，可以選擇圖片後，按右鍵看是否可以『另存圖片』。
Conclusion
乍看之下，我只會覺得原作者實在太閒，竟然拿CSS來畫圖，不過我測試了一下，CSS檔案大小為16K，若用gif為8K(已經過PhotoShop最佳化)，看起來占不到便宜，但若拿去7Zip壓縮後，CSS檔案只有1K，而gif檔為7K，幾乎無法壓縮，或許可以寫一個轉檔程式，將圖形轉成CSS，利用文字檔適合壓縮的特性，經過壓縮後將很適合儲存與傳輸。
Reference
棕熊的[快报][贴图] ANSI Art 的新形式 - CSS-ANSI Art
浙公网安备 33010602011771号
