如何从网页上的非显示图像中删除所有多余的空白

How do i remove all the excess white space from an non-displayed image on a webpage?

本文关键字：删除 空白 多余 图像 显示 网页 显示图      更新时间：2023-09-26

目前，我使用图像作为我的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);
}

请参见fiddle的例子:https://jsfiddle.net/rqrvqLvv/

有两种解决方法。

<标题> 1。我不关心向后兼容性

这个很简单。

舍弃容器.image，只包含以下CSS作为canvas规则的一部分:

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
示例#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示例#2

相关文章：