人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

styleでイメージを表示したり、色を変えたりしたい場合、

下記の2つのコードはうまくいくのですが
e.target.style.backgroundImage = "url('a.jpg')";
button.style.backgroundColor = "#0000ff";

こちらだとうまくいきません。

e.target.style="list-style-image: url('a.jpg')";
このような使い方は間違っていますか?
バックグラウンドにa.jpgをリピートではなく、中央表示させたいときは
どすればいいのでしょうか?
あと、表示させた画像のサイズ変更と、透明化度(薄く表示させたい)を変更するやり方を教えていただけないでしょうか?



●質問者: kajironpu
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

質問者から

ありがとうございます。
e.target.style.backgroundImage = "url('a.jpg')";
この部分に、背景画像を出したいのですが、↑の場合、背景がリピートしてしまいます。
中央に出すには
どうしたらいいのでしょうか?


1 ● a-kuma3
ベストアンサー

こちらだとうまくいきません。

e.target.style="list-style-image: url('a.jpg')";
このような使い方は間違っていますか?

list-style-image は background-image のタイプミスだとして、以下のような書き方はできません。

e.target.style="background-image: url('a.jpg')";

CSS で

#id {
 background-image: url(a.jpg);
}

に相当することを javascript でやるのは、以下のようになります。

 e.target.style.backgroundImage = "url(a.jpg)";

背景を設定するには、background-image や background-color のようにひとつひとつ設定する以外に、background というまとめて設定できるショートハンドがあります。
画像、背景色に合わせて、リピートなし、中央表示、サイズ指定を指定するには、以下のように書けます。

 e.target.style.background = "url(a.jpg) #0000ff center/16px no-repeat";

中央表示の center と、サイズ指定の 16px をスラッシュでつなげているの大事です(ぼくも知らんかった)。
これは、以下のようにひとつひとつ設定したのと同じです。

 e.target.style.backgroundImage = "url(a.jpg)";
 e.target.style.backgroundColor = "#0000ff";
 e.target.style.backgroundPosition = "center";
 e.target.style.backgroundSize = "16px";
 e.target.style.backgroundRepeat = "no-repeat";

透明度の指定は background 系のスタイルではないので、別に指定してあげる必要があります。

 e.target.style.background = "url(a.jpg) #0000ff center/16px no-repeat";
 e.target.style.opacity = 0.2; // 透明度の指定


この辺りはリファレンスを調べると分かります。


kajironpuさんのコメント
詳細のご説明ありがとうございます。 無事成功です。 e.target.style.background = "url(sozai/c.gif) #FFBEDA center/150px no-repeat"; //ここで、間違いの絵を出す
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ