背景图像周围的空白

Question

背景图像周围出现空白。

代码如下：

.class-of-div{

background: #00b5ff url(../img/cart.png) no-repeat;

background-position: 34px 4px;
}

所有浏览器都会发生这种情况

Answer 1

如果您对图像保留了类，请尝试以下代码：

.class-of-div {
    background: #00b5ff url(../img/cart.png) no-repeat;
    background-position: 34px 4px;
    margin: -8px 0 0 -6px;
}

或只需使用以下代码：

body {
    margin: 0px;
}

比上面简单多了。

Answer 2

不要使用 Photoshop 的“另存为网页” - 使用“另存为”。 :)

Answer 3

不使用图像，将背景图像的宽度设置为 100%；

background-size:100%;

Answer 4

将其添加到你的CSS中

*{padding:0px;
margin:0px;}

Answer 5

html, body {
    margin: 0;
    padding: 0;
}

Answer 6

尝试设置display: inline-block;或显示：块；到你的形象。如果您可以使用 css3，请使用

background-size: cover;

您可以使用

background-position: top left;

或类似方式。

Answer 7

根据我对问题的理解，我创建了一个小提琴来解决你的问题。请在这里

找到小提琴

我在 div 周围添加了边框并设置了高度，以便清楚地看到图像周围没有空白。

.class-of-div{
    background: #00b5ff url('http://instafynd.com/problem.PNG') no-repeat 34px 4px;

    height: 200px;
    border:1px solid #f00;
}

如果它解决了您的问题，请告诉我。

Answer 8

图像有问题。下载或创建其他。不是CSS问题。

Answer 9

谢谢您的回答。这是一个图形问题，Photoshop“另存为网络”实际上是在创建该空间（不知道为什么）。但是一旦我从“另存为”保存文件。运行良好。

Answer 10

这是 Photoshop 和类似应用程序上的“保存为网页”选项导致的。我在 iPad 上使用 Adobe Illustrator Draw 时遇到了同样的问题。如果您用于制作图像的应用程序没有“另存为”选项，而不是“导出为网页”，请尝试使用“预览”(mac) 或在窗口上绘画之类的选项来将其裁剪。

Answer 11

抱歉提出这个主题，但在 2020 年，如果你把它放在 html 中：

<img class="class_nbr_1">

在你的CSS中：

.class_br_1 {
    background-image: url("../img/icons/image.png");
    background-color: transparent;
    position: relative; 

您将看到一个白色边框，无法显示。所以只需使用

<p>

而不是

<img>

Answer 12

解决问题最简单的方法是在类中添加以下 css 规则。

overflow: hidden;

Answer 13

我通过将图像设置为“容器”（div）本身的背景解决了这个问题。 您不必使用垂直对齐，而是使用：

body, html {
     margin: 0px;
     height: max-content;
}

注意：确保您已将容器的高度和宽度设置为 100%。

希望这有帮助！

Answer 14

*{内边距：0px; 边距：0px;}这有效