-2

目前，我正在使用圖像作爲我的CSS背景，但是我正在使用剪輯路徑，因此只有圖像的左上角顯示爲背景。這會導致圖像的其他隱藏部分在我的網頁上顯示爲空白（使我的網頁非常長且寬）。我已經玩過邊際，但我似乎無法擺脫所有額外的空間。如何從網頁上的非顯示圖像中刪除所有多餘的空白空間？

任何想法？

感謝

HTML

<div id="image"> 
<canvas id="myCanvas" width = "500" height= "500"> </canvas> 
</div> 

<div> 
    The extra space from the image is pushing this line to the bottom creating extra space in between 
</div>

CSS

canvas {  
    background-image: url("http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg"); 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 

    -webkit-clip-path: inset(0 300px 300px 0); 
    -moz-clip-path: inset(0 300px 300px 0); 
    -o-clip-path: inset(0 300px 300px 0); 
    clip-path: inset(0 300px 300px 0); 

}

請參閱搗鼓一個例子： https://jsfiddle.net/rqrvqLvv/

來源

2015-07-21 Nightflare11

你應該附加一個樣品，這是非常困難的，幫助沒有某種形式呈現。 – jonode

小提琴也許？ –

編輯和更新 – Nightflare11

兩種方法來解決它。

1.我不在乎向後兼容性

這個很簡單。

溝容器.image，只是包括以下CSS爲您canvas規則的一部分：

position: absolute; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
z-index: -1;

`JSFiddle Example #1`

2.我不關心向後兼容性

溝容器.image，並且只包含以下CSS作爲canvas規則的一部分：

position: absolute!important; 
z-index: 0!important; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0;

，並添加此規則：

body > * { 
    position: relative; 
    z-index: 1; 
}

`JSFiddle Example #2`

來源

2015-07-21 21:54:34

我如何擺脫下面和圖像右側的所有額外空間，以便滾動條不存在？ – Nightflare11

你可以這樣做：https：//jsfiddle.net/rqrvqLvv/4/ –

如何從網頁上的非顯示圖像中刪除所有多餘的空白空間？

回答

1.我不在乎向後兼容性

JSFiddle Example #1

2.我不關心向後兼容性

JSFiddle Example #2

相關問題

`JSFiddle Example #1`

`JSFiddle Example #2`