我在一個容器中有兩個div,右邊的div有一個背景圖像。我想移動右側div的背景圖像,以便它的某個部分(例如20px)出現在左側div中。是否有可能例如使用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重疊
相關問題
- 1. css背景圖像定位(負位置?)
- 2. Css背景圖像位置動畫
- 3. CSS背景圖像。在文字位置
- 4. 背景圖像位置和CSS轉換
- 5. CSS - 背景圖像定位
- 6. CSS背景圖像定位
- 7. 重置CSS背景圖像
- 8. 背景大小與css sprite圖像中的背景位置
- 9. 位置圖像到背景
- 10. WKInterfaceController背景圖像位置
- 11. 背景圖像css
- 12. CSS背景圖像
- 13. 背景圖像CSS
- 14. CSS背景圖像
- 15. CSS背景位置衝突
- 16. css中的背景位置
- 17. CSS:背景顏色的背景圖像
- 18. CSS背景圖像放置在:懸停
- 19. CSS3背景圖像位置轉換
- 20. IE中的背景圖像位置
- 21. Chrome改變背景圖像的位置
- 22. IE 9背景圖像位置屬性
- 23. 設置背景顏色和背景圖像在CSS
- 24. css背景位置 - PNG圖像不顯示爲在css中定位
- 25. 如何更改CSS中的圖像背景位置?
- 26. y位置問題的背景圖像通過CSS和javascript
- 27. CSS背景大小的失敗以及圖像位置
- 28. 我如何定義背景圖像在CSS中的位置?
- 29. CSS背景圖像掙扎
- 30. CSS背景圖像問題