15

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

私は自分のやりたいことをしようとしてもうまくいきませんでした。これは、Web デザイン ツールや HTML の知識がある人にとっては非常に簡単なことだと思います。

4

4 に答える 4

27 
<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>
于 2010-03-21T10:57:56.273 に答える
7

提案されているように、png の背景、またはページに合わせてサイズが変更された絶対位置の png でさえ機能する可能性がありますが、コメントで、背景を作成するための優れたツールについて尋ねています-無料で行きたい場合は、GIMPを試してください。背景が透明なキャンバスを作成し、テキストを追加し、必要に応じて回転させてサイズを変更し、レイヤーの不透明度を好みに合わせて下げます。

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

。透かし
{
   背景画像: url(image.png);
   background-position: センター センター;
   背景サイズ: 100%; /* CSS3 のみ。ただし、十分な大きさの画像を作成する場合は必要ありません */
   位置: 絶対;
   幅: 100%;
   高さ: 100%;
   マージン: 0;
   Z インデックス: 10;
}

画像を実際に伸縮させたい場合は、もう少し進んでその div に画像を追加し、そのスタイルを定義して (幅/高さ:100%;) 合わせることができます。

もちろん、これには非常に重要な注意事項があります。IE6 や一部の古いブラウザーは、透明な png をどう処理すればよいかわからない可能性があります。あなたのサイトを巨大な不透明な画像で覆うことは絶対にできません。しかし、幸いなことに、これを回避するためのハックがいくつかあります。これは、透過的な png を使用する場合に実行する可能性が最も高いでしょう。

于 2008-09-16T15:06:13.523 に答える
3

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

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

于 2008-09-16T18:18:01.787 に答える
3

透かしを含む画像を作成し、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>

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

于 2008-09-16T01:36:09.883 に答える