- 締切済み
data スキーム URI を利用について
画像を表示する際にdataスキームURIというのを使ってみました。 HTMLはこのようにIMGタグで表示します。 <img src="data:image/png;base64,iVBORw0...(略)" alt="" /> 画像は表示されたのですが、画像の背景に色がついているので、透過または指定の背景色を指定したいのですが、CSSでやってみても変化がありません。 imgタグに直接CSSで background-color:transparent !important; としても、classで指定してみても変化がありません。 他のCSSはちゃんと効いているのでCSSファイルの読み込みミスなどはありません。 FireBugで調べると background-color:transparent !important; は表示されているのですが効いていません。しかし取り消し線は引かれてなくdata スキーム URIの部分にカーソルを合わせると画像が表示されますがその時点で背景に色がついています。 data スキーム URIを使うのが初めてなので、CSSで指定すること自体が間違っているのでしょうか？ それとも画像を登録する際に画像が足りない部分を背景色で補うようなっているのでしょうか？ 専門家の方よろしくお願いします。
- yamanosuken7389
- お礼率0% (0/2)
- CSS
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
関連するQ&A
- 画像配置のimgタグとbackgroundの違い
画像をHTMLでimgタグで指定するタイプとCSSでbackgroundで指定するタイプの二つありますが、 何のときにimgタグを、何のときにbackgroundを指定するか、知りたいのです。 例えばコンテンツ内ならimgタグ、背景に配置するならbackgroundってのは分るのですが、 タイトルの画像はimgタグとbackgroundのどちらでしょうか？ 他のサイトで拝見してみましたら、どっちも使いますが… 宜しくお願いします。
- ベストアンサー
- HTML
- cssで、imgタグに、背景画像を敷きたい
cssで、imgタグに、背景画像(影)を敷く方法を教えてください。 ※divタグに敷く方法は分かるのですが、imgタグに敷く方法が分かりません。 ■現状 ＜HTML＞ <div id="hoge"> <img src～ ＜CSS＞ #hoge img { background-image:url(/images/background_shodow.jpg); background-repeat: none; background:position: ？ width:？ height:？ margin:？ padding:？; ＜影の大きさ＞ ・width400px ・height200px ＜写真のサイズ指定＞ ・width390px ・height190px ※これまでは、 写真のサイズが違うので、 css部分の#hoge img で、 画像の大きさを強制指定してました。 出来れば、 画像の大きさは、html側で指定せずに、 css側で調整したいです。 ムリなら、html側で大きさ指定します。 div枠にcss設定できれば早いかと思いますが、 それが出来ないため(img タグにしかcss指定不可)の相談です。 よろしくお願いします。
- ベストアンサー
- HTML
- ネスケで背景を表示する際に
ネスケで背景を指定する際に、困ったことが起きてしまいます。まず横700のテーブルのTDに指定して貼り付けますが 、そのうえからまたテーブルを組んで、セルを作ると、背景が繰り返してしまいます。CSSで定義してますが、できません。この教えて・・・でも同じような質問があったのですが、真似しても、テーブルのみだったら背景はきっちり表示されますが。リピート禁止にしてもだめです。 cssはこうです。 <STYLE TYPE="text/css"> .img01{ background-image:url(img/back01.jpg); background-repeat:no-repeat; background-position:50% 50%; } </STYLE> できれば、cssでなくタグのみでできればいいのですが・・・
- 締切済み
- HTML
- 閲覧時に背景色、文字色をcssで変更したい
WindowsXP、Firefox3を使用しています。 白背景に黒文字という一般的なウェブページの配色はまぶしいので、 Stylishというアドオンを使ってcssで背景色、文字色を変更しようと思い、 以下のようなcssを作成しました。 －－－－－－－－－－－－－－－－－－－－－－－－ここから body { color: #696969 !important; background-color: #dcdcdc !important; background-image:none !important; } td { color: #343434 !important; background-color: #d3d3d3 !important; background-image:none !important; } －－－－－－－－－－－－－－－－－－－－－－－－ここまで しかし、これだと色が変更できない領域があります。 例えば、 http://www.yahoo.co.jp/ ……一番下？の背景色しか変わりません http://www.4gamer.net/ ……一切変化しません http://www.flay.com/ ……背景色は変わりますが、文字色が変わりません アドオンを使わず、userContent.cssを使う方法にしても結果は同じようです。 どのウェブページでも背景色と文字色を変更するには、どう記述すればよいのでしょうか？
- 締切済み
- HTML
- CSSのURI化の方法を教えて下さい
HTMLでたった１ページのファイルに使用するスタイルシートのファイル数が ７つか８個になるため データURIスキームを用いて、CSS構文をそのまま 単一のウェブページのコードの内側にデータとして埋めこむことが できるのではないかと想像しています。 画像だけではなく、通常のスタイルシートの構文そのものを HTMLファイルのコードとして、埋め込むための 方法をお教え下さい。 よろしくお願いします。
- 締切済み
- その他（プログラミング・開発）
- css：リンク画像の枠消し： a img { border:none} にしてもダメ
リンク画像に、【テキストリンクと同じスタイル】つまりリンクの背景色や枠線が適用されてしまい、困っています。 下のように、entry-bodyというクラスの a を打ち消す a img のスタイルを指定しているのですが…。（色番号は長くなるので#だけにしています）a:visited img や a:hover img も同様に指定しています。また、.entry-body img には、他のスタイル指定をしていません。 どなたかお分かりになったら助けてください！ .entry-body a { color:#; background-color:#; border-bottom:1px #;} .entry-body a img { background-color:transparent; border-bottom:none;}
- ベストアンサー
- HTML
- 半透明の画像をcssのbackground-imageで指定しても半透明のまま表示させたい
photoshopにて、単純に塗りつぶして不透明度を50％にしただけの画像をpng-24で保存しました。 これをhtmlのimgタグで表示させるとちゃんと半透明で表示されるのですが、cssのbackground-imageで指定すると半透明ではなくなってしまいます。 cssのbackground-imageでも半透明の状態で表示させる方法がありましたら教えてください。お願いします。
- ベストアンサー
- CSS
- 画像に背景色と境界線を付けたい。
いつもお世話になります。 画像の周りに背景色その外側に線を引きたく思っています。 (1) <div style="border:solid 5px gray;padding:20px;background-color:lightcyan;" > <img src="**.jpg" alt="**"> </div> と、すれば可能ですが (2) <img src="**.jpg" alt="**" style="border:solid 5px gray;padding:20px;background-color:lightcyan;" > とすると境界線は表示されても背景色が表示されません。 (1)のように<div>タグを用いなくて、(2)のように<img>タグのみで(1)のようなことはできないものでしょうか。 よろしくお願いいたします。
- ベストアンサー
- HTML
- CSSで、テキストのみの背景色を指定するには？
CSSで、テキストのみの背景色を指定するには？ ＣＳＳを使って、 h1 { color: orange; background: green; } とすると、<h1>タグで示されたテキストの行の背景色が緑色になりますが、 行全体ではなく、テキストのみの背景色を指定するにはどうすればよいでしょうか？
- 締切済み
- その他(ソフトウェア)
- ２つのタグを合わせる
<img src="画像ＵＲＬ" style="filter:Alpha(Style=2)"> このタグは普通の画像を丸の形に変化させるタグなんですが、このタグを 背景を左下に固定させるスタイルシート <STYLE type="text/css"> <!-- BODY { background-image : url("壁紙のURL"); background-attachment: fixed; background-position:0% 100%; background-repeat: no-repeat ; } --> </STYLE> この２つのタグを合わせたいのですがそんなことが出来ますか？ ［つまり、固定する画像に変化をつけたいんです］ 意味不な質問でごめんなさい。 分かる方、ご回答願います。
- 締切済み
- HTML
補足
ご回答ありがとうございます。 元の画像を透過処理した場合しない場合、通常の<img src での呼び出しなど試してみましたが <img src="data:image/png;base64,iVBORw0...(略)" alt="" /> このような感じで呼び出すと背景に色がついてしまいます。 やはり画像保存時になにか不具合がしょうじているのでしょうか？