スタイルシート filter

質問

#title{ background:url('img') no-repeat left top; }

として、画面上に画像をひとつ表示させています。

そして、背景色を変えてみようと思いました。
画像に白い色を使ってあるところがあるのですが、
その白い色も、背景色に変えた方が見栄えが良さそうです。

そこで調べたら、
特定の色（白）を透過させるfilterというものがあると分かりました。

例では、<img src="img" style=filter: chroma(color=#ffffff);>
となっています。

これを、スタイルシートで出来ないものでしょうか。
ためしに、

background-color: #****;
background:url('img') no-repeat left top;
filter: chroma(color=#ffffff);

としてみましたが、変化ありませんでした。。
どこが違うのでしょうか。

透過処理してしまったほうが良いのでしょうか。

やり方が分からない＆ペイントしかないのでfilterでの方法をお聞きしました
よろしくお願いします。

回答No.3

leap_day · ベストアンサー

こんにちは

<style type="text/css">
<!--
#d1{
width:200px;
height:100px;
background:url('sample1.gif') no-repeat left top;
background-color:blue;
filter: chroma(color=black);
}
//-->
</style>
<div id="d1"></div>

としたら黒が透過されて白になりました
・・・つまりbodyの色になったということです
もしやるのであればもうひとつ後ろに背景色をつければできると思います

<style type="text/css">
<!--
#d1{
width:200px;
height:100px;
background:url('sample1.gif') no-repeat left top;
filter: chroma(color=black);
}
#d0{
width:200px;
height:100px;
background-color:blue;
}
//-->
</style>
<div id="d0">
<div id="d1"></div>
</div>

でもfilterはIE専用の機能なので他のブラウザではできません（＞＜）
http://www.htmq.com/style/filter.shtml

お礼

>としたら黒が透過されて白になりました
>・・・つまりbodyの色になったということです
どうもありがとうございます。

こちらでも、bodyの色に透過されました！
ありがとうございます。

補足

現段階ではIE6を想定しているらしいので、問題ありません。
（というかそういう上のことには口が出せません）

お気遣いありがとうございます。

回答No.2

神崎 渉瑠（@taloo）

filterはbackground-imageに適用する物ではないので、できません。

画像そのものを透過する様に作り直す必要がありますが、
たぶんペイントでは出来ないので、
画像を編集するフリーウェアなどを探して、それを使ってください。

画像処理 フリーウェア ソフト
などを組み合わせて検索してみてください。

お礼

body{background-color:#zzzzzz}

#title{ background:url('img') no-repeat left top;
filter: chroma(color=#zzzzzz);}

としたら出来てしまいました。
どうもありがとうございました。

>filterはbackground-imageに適用する物ではないので、できません。
出来てしまったのですが、何故なのでしょうか…

補足

謎が残りますが、フィルターで透過させるという目的が達成されましたので、
今回はしめたいとおもいます。

ありがとうございました。

回答No.1

outbrave

width: 100%; を入れてみてください。

お礼

body{background-color:#zzzzzz}

#title{ background:url('img') no-repeat left top;
filter: chroma(color=#zzzzzz);}

としたら出来ました・・
どうもありがとうございました。