2012-03-07 3 views
0

私は、私に提供されたデザインからWordPressテーマをコーディングしています。 (設計中)の各ポストは、一枚の紙のように見えるの背景にある:どのくらいの高さになるのかわからないときに、固定画像からdivのためのテクスチャ付きの、繰り返さない背景をどのようにコードすることができますか?

Two blog posts on faux paper

問題は(もちろん)私は、各ブログ記事がなりますどのくらいかわからないということです。私はスライスして、必要に応じてブログの投稿部を埋めるようにイメージをスライスし、ダイスしたいと思っています(透明性を備えた粗いエッジを含むなど)。

私は、これを達成するためのいくつかの異なる方法を考えました。トップ、クルード・リピート・ミドル、ボトムなどですが、私が試したことはかなりぎこちなく、大きな(ファイルサイズの)画像が必要です。

私は使用すべきであるが知らないいくつかのテクニックがある場合は、ここで質問しています。私が探しているものをGoogleに説明するのは難しいので、検索するキーワードについてのヒントもありがとう。

答えて

1

をあなたがすることはできません。それを偽造するための2つのオプションがあります。

  • 本当に長い(大)イメージを作成し、それを前提とし投稿は一定の長さになりません。
  • 上部と下部の画像「帽子」を作成し、途中で繰り返します。繰り返し画像をランダムに見えるように大きくすることができますが、実際にはそうではありません。

実際の解決策は、デザイナーに戻って、このことができないことを伝えることです。現実の世界の解決策は、単色に退色する背景画像を作成することです。そうすれば、背景をbackground: #000 url('your-image.png') no-repeat center top;のように定義し、画像が黒くなる(またはスクリーンショットで示されるように茶色になる)ことができます。

2
  1. は今日でborder images(IEとは明らかにノーサポートが)
  2. を検討する必要があります、あなたは複数の背景画像および/または勾配を持つことができます。 (IE9はサポートしていますが、ほとんどのブラウザでグラデーションのサポートが全面的に行われているため、http://www.colorzilla.com/gradient-editor/などのグラデーションジェネレータを見つけたり、css3pie http://css3pie.com/demos/gradient-patterns/(またはその両方)を使用する必要があります。あなたにもあなたのイメージのアルファ透明度を持ついくつかの効果を作成することができます。
関連する問題