問題タブ [background-size]

ヘッダー要素の背景 css タグを使用して、Web ページの上部にバナーを配置しています。

HTML:

CSS:

スティッキー フッターに使用される別の CSS ルール。関連するかどうかはわかりませんが、念のためここに追加します。

これは、Chrome と Firefox で問題なく動作します。ただし、Internet Explorer 11 および 10 では、レンダリングに失敗することがあります。しかし、カーソルをメニュー項目の上に置くと、その要素の下でのみレンダリングされます。「ときどき」とは、F5 キーを 30 回連打できることを意味し、レンダリングされる場合とレンダリングされない場合があります。私にはランダムに見えます。

キャッシュの問題を除外するために、画像の名前を変更しようとしました。

IE 11 と 10 の両方で 3 台の別々のコンピューターで試しました。

埋め込まれたスクリーンショットを投稿できないようです。少なくとも 10 の評判が必要です。代わりにimgurにリンクします。

ワーキング: http://imgur.com/COhiKgx

問題: http://imgur.com/PMjfzUx

誰もがこのようなことを経験しましたか?

編集: コメントにライブ サイトの URL を追加しました。元の投稿にこれ以上リンクを追加できません。

「カバー」から「含む」への背景サイズへのホバー効果を遅らせる方法があるのだろうか？transition-delay が backround-color やその他のプロパティで動作するのを見たことがありますが、backround-size では動作しません。どんな助けでも大歓迎です。ありがとう！

http://jsfiddle.net/rtku7sqk/

更新 おそらく、ホバー効果の発生を遅らせたいが、アニメーションの期間を延長したくないことを明確にする必要があります。

これに似ています... http://dabblet.com/gist/1498443

最新のアップデート

CSSとJavaScriptの両方を組み合わせて使用​​ することで、これを修正する方法を見つけました。

このように、「background-size」は「contain」と「cover」で機能します

http://jsfiddle.net/rtku7sqk/5/

テーブルで背景サイズのカバーを使用しようとしていますが、私が望んでいる結果が得られません。

参照: http://jsfiddle.net/pp9st63L/1/

データ列 (一番左の列を除く) は同じ幅である必要がありますが、列の数は可変です。時には3回、時には4回（左見出し欄を含む）。

これらのデータ列の幅は等しく、背景画像がカバーできる十分な幅である必要があります。他に長いデータがある場合。現在、列の幅は純粋にそれらの列のデータに関連しています。この動作を CSS でオーバーライドし、列の最大幅を設定して同じ幅にしたいと考えています。したがって、背景サイズのカバーが機能します。

これを機能させる方法について何か考えはありますか？

これはすでにどこかで回答されている可能性がありますが、少し検索してもまだ見つかりません。

背景画像を持つ一連の div があります。サイズは background-size:cover に設定されています。

しかし、ホバー時に画像を拡大して拡大できるようにしたいと考えています。このトランジションは、カバー属性では機能しないようです。実際には、画像はズームしますが、トランジション効果はありません。「カバー」から、この場合は 110% まで瞬時に変化します。元の background-size が 100% に設定されている場合は正常に動作します。

しかし、これでは、ページのサイズを変更すると、画像が div の後ろにいくらかタイル状に表示されるように見えますが、これは私が望んでいるものではありません。カバーは、私が望むものを常に中心に保ちます。

カバーまたは同じ効果で成長する際のトランジションの方法について、アドバイスをいただければ幸いです。

イルミオント

background-size:cover左側に 1 つの大きな画像 ( ) のみを含み、カバーの右側に列のある長いテキストを含む、水平スクロールバーを備えた非常に単純な HTML ページを作成しようとしています。

私の問題はposition:relative（フロート付き）とposition:absolute（左付き）についてだと思いますが、どうにか修正できません。現時点では表紙絵はOKで、左上に表示されています。ただし、テキストは (表紙の右上ではなく) 右下に表示されます。

手伝っていただけませんか ？

これが私が行ったことを示すデモです: http://jsfiddle.net/kz5ch49w/38/

この背景についてはカバーしませんが、png画像を作成すると機能し、理由がわかりません:

私はbackground-sizeSASS全体で多くのことを使用しており、使用する必要があるたびに宣言を繰り返しています。

理想的には、一意のクラスで一度宣言を記述し、それを別の場所に拡張したいと考えています。以下のことを試しましたが、うまくいきません。background-size同じルールセットに含めた場合にのみ機能するようです。

これの背後にある主な理由は、CSS の出力を減らすことです。

これが私が通常書くもので、動作します：

これが私が書きたいことですが、うまくいきません：

これは可能ですか？問題を説明するためにペンを設定しました: http://codepen.io/abbasinho/pen/ZYaGJb