2012-03-01 21 views
0

だから、私は本当にあなたがすでに推測しているように質問のタイトルをどのように語るのか分からない。私はthis wordpress themeで使用されている背景効果を達成する方法を知っています:。具体的には - 見ることができるクロップ/マスク効果in this detailCSS3の斜め背景マスクですか?

私はコードを見てみることを試みたが、正直なところ「それを得てはいけない」。

すべてのヘルプは、このCSSはそれを行います

答えて

0

彼らは画像を使用します。

http://themes.evgenyfireform.com/wp-felis/wp-content/themes/felis/images/patterns/pattern3.png

彼らのCSS:

#top-container { 
background: url(http://themes.evgenyfireform.com/wp-felis/wp-content/themes/felis/images/patterns/pattern3.png) #E8E8E8; 
} 
+0

まあ、私は斜めの背景画像を作成してタイルを作成する方法を完全に認識しています。作成方法を見つけたいと思った効果は、斜めの画像の一番下にありました。この画像を参照してください:http://img100.imageshack.us/img100/7256/diagonalmaskeffect.png – Matt

+0

"ボトムマスク"上にトランスキューウーマン画像のように見えます。 –

0

をapreciated:

body { 
background: url('/your/diagonal/image') #E8E8E8 /*Or any other colour*/ repeat 
} 

これは、あなたが既にあなたが使用したいパターンを前提としています。

この:

url('http://themes.evgenyfireform.com/wp-felis/wp-content/themes/felis/images/patterns/pattern3.png') 

はあなたにリンクされているサイトからパターンを行います。あなたはでしたこのイメージを使用していますが、著作権を侵害している可能性があります。

+0

いやイム十分に認識し、効果は私が作成する方法を探していましたイメージは、ある種の作物/マスク効果であった。この画像を参照してください:http://img100.imageshack.us/img100/7256/diagonalmaskeffect.png – Matt

+0

ああ、そうです。私はあなたの質問を誤解しました。 – ACarter

2

ちょうどで、あなたはマスキングが従来行われていることがわかりますウェブインスペクターのページを歩きます他のdivの上に絶対的に配置された高いz-インデックスを有する通常の画像。関連するCSSがリンクされたCSSファイル内にあり、読み込み:対角線の下部に斜めの背景画像を作成し、タイル方法の

.bottom-mask { 
position:absolute; 
left:0; 
bottom:0; 
height:45px; 
width:100%; 
min-width:980px; 
z-index:400; 
background:url(../images/bottom-mask.png) no-repeat 50% 0 
関連する問題