背景透明化cssとプレビューツールの話です。

背景透過させてテキストは透明化したくない場合はRGBA表記する。

<div class="box">てきすとは透明化したくないの!</div>
.box {
background-color: rgba(87,233,211,0.7);
color: #666;
padding: 10px; }

スクリーンショット 2016-02-13 12.58.33.png

こんな感じ。

opacityで透明化させることも可能だけど全部透明化になってしまうので、rgbaが良い。

ちなみに、macのsafariだけかもしれないけどopacityでやるとテキストがかすれて綺麗にでないのはなんでだろ。

スクリーンショット 2016-02-13 12.30.06.png

safariさんのレスポンシブデザインモードが素敵。

作業するときはsafariでやってるのですが、レスポンシブデザインモードがかなり使い勝手良いです。
IEモードも見れちゃう。

スクリーンショット 2016-02-13 12.35.19.png

スマホの場合の横にした場合なんかも見られて素敵です。

以上、覚書でした。