- 締切済み
PNG画像の余白をカットする方法はありませんか？
動的に出力した図（PHP+JpGraphによるPNG画像）が，1pxの黒いボーダーで 囲まれているのですが，これを除去にするのに，何かアイデアない でしょうか．JpGraphにそういう設定項目があれば一番よいのですが． 上下左右のマージン1pxをトリミング（除去）するとか， 上下左右のマージン1pxを背景色（白）に塗りつぶす， …なんてことができると一番良いです． 手段は何でもよいです．CSSのフィルタとか，いろいろ可能性はあるかもしれませんが．
- みんなの回答 （1）
- 専門家の回答
みんなの回答
関連するQ&A
- IEでPNG画像が黒く縁取りされてしまいます。
私のサイトにスムーズスクロールで矢印画像をを設置しております。 背景は透明のpng画像（矢印）です。 添付の画像を参照していただきたいのですが、 chromeやFirefox、IE９では、矢印画像はそのまま正常に表示されます。 しかし、IE８（多分IE７でも）で確認すると、矢印が黒く縁どられて 表示されてしまっております。 CSSに下記の記述をしましたが、解決いたしませんでした。 border: 0px; border-style:none; background-color:transparent; 画像自体が四角くふちどられるわけではなく、 なぜ矢印が縁どられるのか原因がわかりません。 IEで縁どられず、そのまま表示させる方法を教えて頂けませんでしょうか。 どうぞ、よろしくお願いします。
- ベストアンサー
- HTML
- 上下の余白について
下記のサイトのjqueryを自身のHPで使用しているのですが、私自身がマージンを設定しているわけでもないのに上下に相当な余白が入ってしまいます。 http://flowplayer.org/tools/demos/tabs/accordion-custom.html 下記が問題のhpです。上下の黒の部分になります。目測では200pxぐらいです。 http://kazu1213abi.web.fc2.com/others/accordion/accordion.html CSSなども使用しているみたいなのですが、コードを見ても私が初心者の為さっぱり分かりません。 一部（jquery.tools.min.jsとtabs-accordion.css）のファイルはサイトからダウンロードして問題のhtmlファイルと一緒にサーバーにアップしています。 tabs-accordion.cssの中身は、 /* root element for accordion. decorated with rounded borders and gradient background image */ #accordion { background:#333 url(/img/global/gradient/h300.png) 0 0; width: 300px; border:1px solid #333; -background:#666; } /* accordion header */ #accordion h2 { background:#ccc url(/img/global/gradient/h30.png); margin:0; padding:5px 15px; font-size:14px; font-weight:normal; border:1px solid #fff; border-bottom:1px solid #ddd; cursor:pointer; } /* currently active header */ #accordion h2.current { cursor:default; background-color:#fff; } /* accordion pane */ #accordion div.pane { border:1px solid #fff; border-width:0 2px; display:none; height:180px; padding:15px; color:#fff; font-size:12px; } /* a title inside pane */ #accordion div.pane h3 { font-weight:normal; margin:0 0 -5px 0; font-size:16px; color:#999; } と記述されています。もう一つjquery.tools.min.jsがあるのですが、中はごちゃごちゃしたコードが記述されています。 外部ファイルに関係なく強制的に上下の余白を無くす方法など解決方法などはあるでしょうか？ 御教授ください。よろしくお願いします。 .
- ベストアンサー
- JavaScript
- paddingで設定した余白について
CSSとXTHMLを勉強しています。 以下のように、ソースを記述した時、 上下左右ともに20pxの余白が設定されると思うのですが、 上部余白のみ広くなってしまします。 理由を教えて頂けませんか？ div#container{ border:solid 2px #bbffaa; padding:20px } <body> <div id="container"> <h1>てすと見出し1</h1> <p>てすと</p> </body>
- ベストアンサー
- ホームページ作成ソフト
- tbody要素に削除出来ないマージンが入る
table要素の thead要素及びtbody要素についてですが この2つの要素は内部的に margin: 2px; が指定されたような感じになっています。(firebugなどで確認) つまり、上下左右にマージンが2px自動的に入ってます。 もちろん、table要素とtbody要素には、margin及びpadding及びborderは0を設定しています。 このマージンのようなものを取り去りたいのですが margin : 0px;などとしてもこのマージンのようなものを取り去ることは出来ませんでした。（ツールでみると、マージン及びパッディングは０なので当たり前ですが） table要素を使う限り、この2pxというものは自動的に挿入され、CSSでは取り去ることは無理なのでしょうか？ 回避策としては、margin: -2px;で回避することは可能みたいなのですが そもそもどうしても2pxが入ってしまうのか、またそれがなぜCSSで設定出来ないようになっているのか 疑問に思っています。 これは、firefox3.6(firebug) 及び ie8(開発ツール)で確認しました。 分かりにくい説明かもしれませんが宜しくお願いします。
- ベストアンサー
- HTML
- ｇooブログ 画像の下に余白が空きすぎて困っています・・・
ブログに絵を載せています。その時に使用しているのは以下の様なタグ（？）です。これで画像を掲載して、その下に絵のタイトルを打ち込んみたいのですが、余白が空き過ぎていて気になります。どうしたらよいのでしょうか？style="margin-right:10px;"などで設定しても駄目でした。 <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0"><tr> <td align="center" valign="middle"> <A HREF="http://test.png"> <IMG SRC="http://test.png" alt="おめでとう" title="今年もよろしくね"style="border-width:1px;border-style:solid;border-color:#000000"> </a> </td></tr></table> 「あけましておめでとう」 ↑この「あけましておめでとう」というタイトルが画像ともう少しくっついて欲しいのです。もしかして、タグの問題ではなくて、ブログのCSSの設定で直すのでしょうか？よろしくお願いします。
- ベストアンサー
- ブログ
- IE6のPNG透過
こんばんは どなたかわかりましたら押してください。 現在pngの透過をIE6で見れるよう試行錯誤してるのですが、 どうも上手くいきません。 只今こんな感じです。 以下CSS==================== #navi_layer { width: 100%; height: 50px; margin: 0px 0px 10px 0px; padding: 0px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='絶対パス指定.png',sizingMethod='crop'); background-image: url(絶対パス指定.png); background-repeat: repeat-x; } 以上CSS==================== このnavi_layerの背景を透過させて、 その上にイメージを載せようと思っています。 現段階では透過テストだけしているので、 イメージはまだ載せていません。 その状態で透けてくれない状態です。 使用している保存形態はPNG-24です。 IE7やFirefoxでは透過を確認できています。 なのでいけるかと思ったんですが… どなたか教えてください＞＜ 宜しくお願いします。
- ベストアンサー
- HTML
- 画像のセンターリングについて
真ん中にはなるのですが、IEで見るとwidth900pxにしているのに940pxになったり、firefoxで見るとスクロールすると上下に背景ではなくて画像が動いてしまいます。どうやって治したらいいでしょうか？ html <div id="content"><img src="img/bacttrast.png" alt="aa" /></div> css #content{ padding: 40px; width: 900px; height:790px; margin: 0 auto; }
- ベストアンサー
- ホームページ作成ソフト
- 背景画像にロゴを重ねる方法を教えてください。
ＣＳＳで背景画像にロゴを重ねる方法を教えてください。 現在、 htmlが以下の状態 <div class="dz_headbar"> <a href="test.html" target="_blank"><img src="title.gif" alt="ロゴ" " style="border:0"></a> </div> cssが以下の状態です。 .dz_headbar { background-image: url("3gradation.png"); background-position: left top; background-repeat: repeat-x; padding-top: 50px; } ヘッダー背景の3gradation.pngの上にロゴ画像であるtitle.gifを重ねたいのですがどうもうまくいきません。 ご教授いただける方何卒宜しくお願いします。
- ベストアンサー
- HTML
- Dreamweaver CS3で背景画像が表示されません
セールスレター（ホームページ）の背景に画像を使いたいので ＣＳＳの「body」から背景→背景イメージの欄に使用したい画像を設定しています。 理想はグラデーション画像なのですが、 どんな画像を入れても表示されません。 （グラデーションでないものも、ファイルサイズ等に関係なく表示されません） jpg画像で同じフォルダ内に入っています。 背景色は問題なく表示されます。 ホームページ内の背景でない部分はdivで囲み影画像を背景にしてあります。 （幅680px,高さ指定なし マージン：左右自動、上下０ 影の画像をＹ軸にリピート） body：（幅高さ指定なし、マージン上０、背景に入れたい画像） ページプロパティから背景画像を指定した場合は表示されますが、 ページのＴＯＰのみグラデーションのある画像にしたいため リピートするとグラデーションが何度も繰り返されてしまいます。 そのため「固定」を使うためにＣＳＳを使用しなければならないと思い ＣＳＳで表示する方法を探しております。 初心者なので何か初歩的なミスをしているかもしれません。 よろしくお願い致します。
- ベストアンサー
- CSS
- CSSで左側の余白
CSS本を見ながら苦闘しています。 下のようなCSSを書いたのですが、全体のレイアウトが左寄せから10pxほど余白が出て表示されてしまいます。 HTMLではそのような指定はしていません。 どうしてなのでしょうか。 また、どのようにしたら良いのでしょうか。 レイアウトは div#top div#top1 で２段上下にブロックしたあと、左右のブロックで分けています。 ※また、:と;の間にスペースを入れる、入れないは本によってマチマチなのですが、どのような書き方が正しいのでしょうか。 <style type="text/css"> <!-- body { font-size:10pt ; line-height:20px ; background-color:white; color : black ; } td { font-size:10pt; line-height:16px ;} div#top { position: absolute; top:0px; } div#top1 { position:absolute; top:95px ; } div#menu { float:left; } div#content { float:left; border-left:1px solid #666666 padding-top:10px; padding-left:20px; width:580px; } // --> </style>
- ベストアンサー
- HTML
