Webデザインに関する質問です。このページを見て回答してください。

http://f41.aaa.livedoor.jp/~hinop/q001.htm

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2004/11/18 23:59:42
  • 終了:--

回答(13件)

id:tailliar No.1

tailliar回答回数109ベストアンサー獲得回数02004/11/19 00:17:35

ポイント14pt

完全に透かせるかというと微妙ですが、例えば

テーブルタグをネストさせて、

外側のテーブルではbackground=”表示させたい画像”

内側のテーブル(文字表示)のbackgroundに、格子状に透過させたgif画像等を使うことで、そういう効果を出すことができるかもしれません。

バッドノウハウですが確実な方法としては、

下に透かしたい画像の、ちょうど表示される部分を切り取ってしまい、画像加工した上でbackgroundに指定すれば、確実にそういう効果として見せることはできますね。

id:hinop

格子状に透過させた画像を作るにはどうすれば良いでしょうか?

2004/11/19 00:20:16
id:GEN111 No.2

GEN111回答回数472ベストアンサー獲得回数582004/11/19 00:20:39

ポイント13pt

IEなら filter:alpha を使う。

それ以外なら

■□■□■□

□■□■□■

■□■□■□

□■□■□■ (□は透明色)

こういう市松模様のパターンを作って背景にする。

id:hinop

なるほど・・。そのようなパターンを作ればできるのですね。やってみます。

2004/11/19 00:22:12
id:ymch No.3

やちまう回答回数36ベストアンサー獲得回数52004/11/19 01:17:41

ポイント13pt

filter:Alpha()を用いれば簡単に出来ます。

…ただし、見る側の環境がIE4以降であることが前提ですが…

<table>

<tr>

<td style=”background-color:#000000; filter:Alpha(Opacity=50)”>

<div style=”color:#ffffff; position:relative;”>

■■■文字は不透明■■■

</div>

</td>

</tr>

</table>

※Opacityの指定値は透明度(%)です。数値が大きいほど不透明になります。

また、<td>〜</td>内に配置された文字まで透けない用にする為に、

文字をブロック要素として相対位置指定(relative)します。

id:hinop

詳しいご説明ありがとうございます。

Firefox等でも見れる方法はないのでしょうかね。

もう1件だけ待ちます。

2004/11/19 01:28:43
id:hanakorori No.4

hanakorori回答回数10ベストアンサー獲得回数02004/11/19 03:50:49

id:hinop

ありがとうございます。でも透けてませんね。

2004/11/19 13:03:32
id:GEN111 No.5

GEN111回答回数472ベストアンサー獲得回数582004/11/19 07:14:37

ポイント13pt

<TD background=”01.gif”>...</TD>

ではダメでしょうか?

IE6、FireFox、Opera で透過しているのを確認したのですが……

それとも質問の意味を取り違えてるのかな……

id:hinop

透明にしたいという言い方が悪かったですかね。

少し色がついて完全に透過できればいいのですが・・

2004/11/19 13:04:08
id:ke_ishi No.6

ke_ishi回答回数269ベストアンサー獲得回数02004/11/19 09:53:12

ポイント13pt

htmlと画像のセットをURLにおいてみました。

画像のプレロードなんかを組み込めば、実用的だと思います。ちなみに背景指定はcssで行っています。

id:hinop

ありがとうございます!

2004/11/19 13:04:27
id:pamu No.7

pamu回答回数181ベストアンサー獲得回数02004/11/19 10:18:56

ポイント13pt

http://kasetakao.fc2web.com/official.html

加瀬尊朗さん関連オフィシャルサイト

#2さんの方法でbackの画像を透かせているページです。

私のサイトなんですが…

http://www.hatena.ne.jp/1100791675

http://www.hatena.ne.jp/1100789982 このような質問をしました。 ---------------------------------- ■□■□■□ □■□■□■ ■□■□■□ □■□■□■ (□は透明色.. - 人力検索はてな

こちらの回答で提供された画像をtableのbgcolorにはめ込んで在ります。

で、その升目の白部分に色をつけてみましたのが2つめのURL。

こんなカンジでよろしいでしょうか。

http://kasetakao.fc2web.com/mihon.html

加瀬尊朗さん関連オフィシャルサイト

id:hinop

なるほど。やはり網目模様になるのは仕方ないのですか?

2004/11/19 13:05:07
id:Mars No.8

Mars回答回数203ベストアンサー獲得回数202004/11/19 13:49:10

ポイント13pt

http://css.g.hatena.ne.jp/keyword/-moz-opacity

-moz-opacity - Hatena::Group::CSS

一応Mozilla系とSafariでCSSを使う方法もあります。

(背景だけでなく内部の文字なども透過されてしまうようです)

Mozilla系:opacity

Safari:-khtml-opacity

いずれも指定値は1:不透過〜0:透過

透化についてはCSSではまだ微妙ですので他の方の回答のように網目画像を使った方が確実っぽいと思います。

http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/Safari_ExtendCSS....

Safari の CSS 独自拡張あるいは先行実装など

id:hinop

ありがとうございます。

【網目を見せずに画像を用いて透明化する方法】教えてください。

2004/11/19 14:19:23
id:pamu No.9

pamu回答回数181ベストアンサー獲得回数02004/11/19 17:05:48

ポイント13pt

http://www.hatena.ne.jp/1096864448

人力検索はてな - スタイルシートについての質問です。 <table>〜</table>のタグ内で背景を半透明化すると同時に 文字と画像を不透明にする方法を教えてください。 <td width=”*” class=”..

#7です。ポイント不要です。

網目についてですが、私の環境(Win2000・IE6・モニタ解像度1024×768)では

網目には見えません。

試しに、モニタ解像度を640×480にしてみましたら、確かに網目に見えました。

自分のサイトの市松GIFは1ピクセルで作ってあって、これ以上は

小さくしようがありません。(さっきの回答記入ミスがありました

× こちらの回答で提供された画像を

○ こちらの回答で提供された画像と同じ原理の物を)

この方法でも、ユーザーのブラウザ・解像度に左右されるのは免れないと思います。

URLは、このご質問にちょっと関連してる既出質問です。

id:hinop

なるほど・・。もう少しつづけます。

2004/11/19 17:13:21
id:cindy No.10

cindy回答回数1ベストアンサー獲得回数02004/11/20 12:01:03

ポイント13pt

こんなのはどうですか?

CSSに

.waku{

font-family:’Osaka-等幅’;

font-color:#000000;

font-size:12;

filter:Alpha(opacity=60);

}

を入れて、テーブルの方を

<TABLE width=”371” background-color:#ffffff; class=”waku”>

<TBODY>

<TR>

<TD bgcolor=”#000000”><FONT color=”#ffffff”>○メニュー○</FONT></TD>

</TR>

<TR>

<TD align=”right” bgcolor=”#000000”>これらの部分の背景を色付きで透かしたい。</TD>

</TR>

<TR>

<TD align=”right” bgcolor=”#000000”>あああ</TD>

</TR>

<TR>

<TD align=”right” bgcolor=”#000000”>いいい</TD>

</TR>

<TR>

<TD align=”right” bgcolor=”#000000”>ううう</TD>

</TR>

<TR>

<TD align=”right” bgcolor=”#000000”>えええ</TD>

</TR>

<TR>

<TD bgcolor=”#666666” bgcolor=”#000000”>...</TD>

</TR>

<TR>

<TD align=”right” bgcolor=”#000000”></TD>

</TR>

</TBODY>

</TABLE>

tableにclass=”waku”を指定して、TDのバックを000000にします。。。で、透過の濃さはCSSのfilter:Alpha(opacity=60);この数字で調節します。

一応上の通り試したら上手く行きましたけど(^^

id:hinop

やってみますね。

2004/11/22 02:53:35
id:midoritamidori No.11

midoritamidori回答回数14ベストアンサー獲得回数02004/11/21 20:52:08

ポイント13pt

http://d.hatena.ne.jp/gotanda6/20041114#tsutaya

【B面】犬にかぶらせろ!

スタイル設定でできますが、IEでしか対応していません。

alphaという項目です。

アドレスはtsutayaと個人情報とはてなについて書いてある記事です。締め切られてしまいましたがご参考までに。

id:hinop

ありがとうございます

2004/11/22 02:54:01
id:Aoisora1101 No.12

Aoisora1101回答回数28ベストアンサー獲得回数02004/11/22 20:54:49

ポイント13pt

ポイントは不要です。

こちらのHPではいろんな技法がありますがいかがでしょうか?

id:hinop

開くのにポイントがかかるので回答しなくて結構です。

ここのサイトは知っていますが、そのような記述はなかったと思いますが?

2004/11/22 21:05:57
id:poyochin No.13

poyochin回答回数36ベストアンサー獲得回数02004/11/24 18:58:09

ポイント13pt

ポイントは要りません。

恐らく同じことをしているサイトがありましたので

ご参考までに。

横しまの背景画像の上に、網目の背景を表示させて透かしています。

id:hinop

それではこのあたりで。ありがとうございました

2004/11/25 19:24:40

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません