私はコンテナに2つのdivがあり、右側のdivには背景イメージがあります。右のdivの背景画像を移動して、左のdivにその一部(たとえば20ピクセル)が表示されるようにします。例えばZ-indexなどを使用して可能ですか?背景画像の位置を-20pxに設定しようとしましたが、表示されません。 jsfiddleをご覧ください:http://jsfiddle.net/k8d6U/1/CSSの背景イメージの位置
1
A
答えて
2
バックグラウンドイメージは要素の境界内にのみ表示されるため、右揃えのdivが左揃えのdivと目的の20ピクセルで重なっている場合にこれを行うことができます。
また、右側のdivの背景画像を-20px
に設定しても同じような背景画像を左側のdivに適用し、右側から20ピクセルの位置に配置することができます。これはあなたが探している効果を与えるでしょう。
Hereは例です:例では
.left {
float:left;
width:200px;
background: orange url("http://i42.tinypic.com/2vxfyc4.jpg") no-repeat 180px 50%;
}
.right {
float:left;
width:200px;
background: #ccc url("http://i42.tinypic.com/2vxfyc4.jpg") no-repeat -20px 50%;
}
、私は直接、背景画像の下に画像そのもの(絶対位置)にも配置したと幅が同じである(場合には、あなたが証明を必要) 。
1
私はこれがあなたが探していると思いますhttp://jsfiddle.net/k8d6U/8/ z-indexは相対/絶対/固定配置要素に対してのみ機能します。右は左に重なっていますが、これが達成される方法は異なる解像度で壊れる可能性があります。 20pxストリップを左のdivに中央に追加し、残りの部分を右のdivに追加してオーバーラップを偽造します
関連する問題
- 1. CSS - 背景イメージの位置付け
- 2. CSSスプライトフルページ背景:背景位置
- 3. CSS画像の背景の位置
- 4. CSS blogspot背景の位置付けヘルプ
- 5. CSS複数の背景位置決め
- 6. CSS - 背景イメージの回転
- 7. CSSの背景イメージとパディング
- 8. 背景位置IE9
- 9. css背景画像の配置(負の位置?)
- 10. jqueryは複数の背景でCSSの背景位置を変更する
- 11. IE 7および8の背景イメージの位置問題
- 12. HTMLの\のCSS:背景画像の位置
- 13. CSS:背景位置の異なるコーナーオフセットでの問題
- 14. CSSの背景位置の組み合わせタイプ
- 15. CSSのロールオーバ - 背景のイメージがない
- 16. CSSの背景イメージとボックスの幅(%)
- 17. CSSスプライトの背景位置が正しくありません
- 18. CSSメディア印刷の背景イメージ
- 19. CSSボタンブラウザの問題(背景イメージ)
- 20. 背景イメージ最小幅と位置付け
- 21. jqueryスライダの背景位置の変更
- 22. IEのバグ - 背景の色と位置
- 23. 無限の背景位置のアニメーション - jQuery
- 24. iOS上の固定位置の背景
- 25. 背景画像の位置dompdf css2
- 26. 位置の背景及び中央
- 27. CSSアニメーションとリニアグラデーションで背景位置が機能しない
- 28. CSS:背景位置が正しく動作しない
- 29. CSSストレッチされた背景イメージ
- 30. CSS:ヘッダー内のイメージの位置