web-dev-qa-db-ja.com

ウェブサイトのテキスト透かし？どうやってするの？

私はC++/C＃開発者であり、Webページでの作業に時間を費やしたことはありません。いくつかのページの背景に大きな文字でテキストを（おそらくランダムにそして斜めに）配置したいと思います。前景のテキストを読み、「透かし」も読めるようにしたいと思います。それはおそらく色選択の機能だと思います。

私は自分のやりたいことをやろうとして失敗しました。これは、WebデザインツールやHTMLの知識を持っている人にとっては非常に簡単だと思います。

htmlwatermark
13
Tim
<style type="text/css">
#watermark {
  color: #d0d0d0;
  font-size: 200pt;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: -1;
  left:-100px;
  top:-200px;
}
</style>

これにより、透かしとしてテキストだけを使用できます。これは、Webページの開発/テストバージョンに適しています。

<div id="watermark">
<p>This is the test version.</p>
</div>
25
user136776

提案されているように、pngの背景は機能する可能性があります。または、ページに合わせたサイズの絶対位置のpngでも機能しますが、無料で使用したい場合は、背景を作成するのに適したツールは何かについてコメントで質問しています。 [〜＃〜] gimp [〜＃〜] を試してください。背景が透明なキャンバスを作成し、テキストを追加し、回転させて必要に応じてサイズを変更してから、レイヤーの不透明度を下げて好みに合わせます。

ページ全体をカバーしたい場合は、クラス「透かし」を使用してdivを作成し、そのスタイルを次のように定義します。

。watermark 
 {
 background-image：url（image.png）; 
 background-position：center center; 
 background-size： 100％;/* CSS3のみですが、十分な大きさの画像を作成する場合は実際には必要ありません*/
位置：絶対; 
幅：100％; 
高さ：100％; 
マージン：0; 
 z-index：10; 
}

画像を実際に引き伸ばしてフィットさせたい場合は、もう少し進んでそのdivに画像を追加し、フィットするスタイルを定義できます（幅/高さ：100％;）。

もちろん、これには非常に重要な注意事項があります。IE6や一部の古いブラウザは、透明なpngをどう処理するかを知らない可能性があります。あなたのサイトをカバーする巨大な、不透明な画像を持っていることは確かにしません。しかし、これを回避するための いくつかのハック があります。幸いなことに、透明なpngを使用する場合は、これを実行することをお勧めします。

7
Doug Kavendek

透かし入りの画像を作成し、cssを介してその画像を背景として設定できます。

例えば：

<style type="text/css">
.watermark{background:url(urltoimage.png);}
</style>
<div class="watermark">
<p>this is some text with the watermark as the background.</p>
</div>

それはうまくいくはずです。

3
dawnerd

上記のkavendekの提案のcssに「background-attachment：fixed」を追加すると、ウィンドウ内の指定された場所に背景画像を「固定」できます。そうすれば、ユーザーがページのどこをスクロールしても、透かしは常に表示されたままになります。

個人的には、固定された背景画像は視覚的に煩わしいと思いますが、サイト所有者は、ロゴや著作権表示（おそらく画像として表示される）が常にユーザーの目の前にあることを知っているのが好きだと言っていると聞きました。

2
eldgie