如果添加填充ONY我的背景圖像，試圖與背景出身沒有工作

我有了這個CSS代碼片段： https://jsfiddle.net/puw3wv1n/3/ 貌似這個如果添加填充ONY我的背景圖像，試圖與背景出身沒有工作

1 = Main background of <html> (not important, not just for info) 
2 = is just a background image about 5x5px with color 
3(left) = is images/bg_l.png (shadow has alpha) 
3(right) = is images/bg_r.png (shadow has no alpa, background is white 


.body_wrapper { 
    background-color:transparent !important; 
    margin-top: 0px !important; 
    border: 5px solid transparent !important; 
    background-image: url(images/bg_l.png), url(images/bg_r.png), url(images/bg_bg.png) !important; 
    background-position: left, right, top left !important; 
    background-repeat: repeat-y, repeat-y,repeat !important; 
    /*background-size: initial,initial,cover !important; */ 
    background-origin: content-box, content-box, content-box !important; 

}

我想要那個「2」左並且實際上變得透明，但在「3」之間應該留下。所以3的陰影適用於<html>背景（1）

我已經嘗試使用透明邊框，以便我可以使用background-origin以邊框爲邊界開始背景圖像「3」框和背景圖像「2」應該再在中心（邊界內）開始與邊框（5像素）

的填充但是，當我設置

background-origin: border-box, border-box, content-box !important;

這裏是一個它不工作更有用的圖像：

過度顏色應該變得透明，但裏面的顏色應該保留。

更新： 下面是我爲https://jsfiddle.net/puw3wv1n/3/

來源

2016-09-04 raviolican

請添加最少的，完整的，並且可驗證的例子，也見http://stackoverflow.com/help/mcve – Roy

@Roy我已經添加了小提琴 – raviolican

@servus不確定你想在這裏解決什麼......困惑於閱讀你的問題... – kukkuz

這不是那麼容易，但我發現離開待辦事項是由小提琴。

我添加

background-clip: border-box,border-box, padding-box !important; 
background-origin: border-box, border-box, padding-box !important;

，並得到它的工作

來源

2016-09-04 14:01:53 raviolican

如果添加填充ONY我的背景圖像，試圖與背景出身沒有工作

回答

相關問題