カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

PNG画像の透過表示

以下のフィルター(CSS)をimg要素に適用させる

filter: chroma(color=#000000);

もしくは

<div style="width:100%;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image, src='logo.png');"></div>

この場合、CSSでレイヤーとして表示しないといけない。

1,553 views

floatリストナビゲーション

画像を使用したナビゲーションを作成する場合に、画像下部の余白を無くすには

ul
{
   list-style: none;
   margin: 0px;
   padding: 0px;
}
ul li
{
   display: inline;
   float: left; /* 横並びにする場合 */
}
ul li a, ul li img
{
   display: block;
}
1,253 views

hr

IE,Safari,Opera,Firefoxでボーダーをスリムにする方法
ボーダーは0pxにし、高さを1pxに。
色・背景色を指定する。

hr
{
   border: 0px;
   height: 1px;
   color: #cbcbcb;
   background-color: #cbcbcb;
}
1,656 views