在背景图象附近的白色空间

Question

背景图像周围出现空白区域。

代码如下：

.class-of-div{

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

background-position: 34px 4px;
}

这种情况发生在所有浏览器中

Answer 1

不要使用photoshop＆＃34;除了网络＆＃34; - 使用＆＃34;另存为＆＃34;代替。 ：）

Answer 2

无图像，请将背景图像的宽度设置为100％;

background-size:100%;

Answer 3

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

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

或只是使用以下代码：

body {
    margin: 0px;
}

这比上面简单。

Answer 4

尝试设置display：inline-block;或显示：块;对你的形象。如果您可以使用css3，请使用background-size: cover;您可以使用background-position: top left;或同样。

Answer 5

将此添加到您的css

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

Answer 6

根据我对这个问题的理解，我创造了一个解决问题的小提琴。请找小提琴here

我在div周围添加了一个边框并设置了一个高度，以便很清楚图像周围没有空白区域。

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

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

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

Answer 7

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

Answer 8

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

Answer 9

感谢您的回答。这是一个图形问题，photoshop“为网络保存”实际上创造了这个空间（不知道为什么）。但是一旦我从“另存为”中保存文件。它工作正常。

Answer 10

这是导致这种情况的photoshop和类似应用上的网络保存选项。我在iPad上使用Adobe Illustrator Draw时遇到了同样的问题。如果您用于制作图像的应用程序没有＆＃34;另存为＆＃34;选项而不是＆＃34;导出网络＆＃34;尝试使用＆＃34;预览＆＃34; （mac）或在窗户上绘画以将其裁剪下来。

Answer 11

很抱歉提出这个主题，但是如果您在html中将其放在2020年，则为

<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;