2017-08-17 15 views
-2

このデモのコードをWebページに実装しました。https://tympanus.net/Tutorials/CSS3FullscreenSlideshow/index.htmlデモでわかるように、背景画像には、VRヘッドセットに表示されるようなスクリーンドア効果があります。私のウェブページでは少し悪化しています。おそらく、デモと比較してイメージが明るいからです。これはおそらくパフォーマンスを向上させることになると思いますが、解像度を高く設定する方法はありますか?可能な限りピクソイルを最小限に抑えたいと思います。私はこの問題について議論する投稿を見つけることができないようです。CSSキーフレームアニメーションスクリーンドア効果

Sky in photo is high detail but pixilated on background

空は私の写真で明らかであるが、(画像を参照)は、ページ上の大ドットで描画。

+1

あなたがここでの問題を示したマークアップの最小限の例を投稿するために必要とされています[MCVE】いくつかの他のサイトへのリンクがあれば何か良い誰もしませんし、そのサイトが消えたり、将来の変化するとき。 – Rob

+0

私はそれを得る、あなたは答えを知らない。私はコードの詳細な例にリンクしました。あなたが何か役に立つことがないなら、私の質問にはコメントしないでください。これは簡単な質問です。答えを知っている人は、リンクされた例の有無にかかわらず、すでに投稿した情報から十分な情報を得ることができます。また、あなたが参照した「リンク」はガイドラインであり、要件ではありません。 – tony95

+0

@ tony95私たちが答えを知っているかどうかは、サイトルールです。 「自分のコードは機能していません」質問には質問自体にMCVE *が必要です。 – TylerH

答えて

0

これはあなたが投稿したリンクで見たコードの一部で、テクスチャを担当しています。

これは、イメージの上に透明な繰り返しイメージでdivを作成することです。これにより、画像の上にテクスチャが表示され、画像を簡単に交換してテクスチャを維持できるため、理想的なソリューションです。

.cb-slideshow:after { 
    content: ''; 
    background: transparent url(../images/pattern.png) repeat top left; 
} 

.cb-slideshow:after { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    top: 0px; 
    left: 0px; 
    z-index: 0; 
} 
+0

**評価から**:この回答は**低品質**と表示されました。答えは常に高く評価されますが、実際にどのようにコードが問題を解決しているかについての情報を提供するのに役立ちます。誰もが正確なコーディングロジックに精通しているわけではありませんが、あなたの一般的なアプローチ*または*コンセプトを理解するかもしれません。あなたの答えを改善するために、いくつかの文脈を提供してください。(** https://meta.stackexchange.com/questions/114762)、[**偉大な答えを書く**]答えを数える方法のヒントについては、 –

+0

を参照してください。これにより、解像度が向上するか、またはキーフレームの背景画像の画像のピクチル化がどのように減少しますか?それはしません。 – tony95

+0

は応答との応答を更新しました。それは背景画像に全く影響を与えるべきではなく、単に画像のテクスチャを与えるだけです。 –