logo标签列表

背景图片周围的空白区域

cssbackgroundbackground-imagewhitespacephotoshop
3

背景图周围出现了白色空白。

enter image description here

代码如下：

.class-of-div{

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

background-position: 34px 4px;
}

所有浏览器都会出现这种情况。
抱歉，正在更新链接。 - user1860754
1
我认为这不是CSS问题。你是从Photoshop导出它吗？- @user1860754 - Nitesh
13个回答
5
如果您想将一个类应用于图像，请尝试以下代码：

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

或者直接使用以下代码：

body {
    margin: 0px;
}

这比上面的更加简单。

4

不要使用 Photoshop 的“保存为 Web”选项，而是使用“另存为”选项。 :)

2

没有图像可依，将背景图像的宽度设置为100％；

background-size:100%;
无法工作，我已经更新了链接（http://instafynd.com/problem.PNG）。请您再次检查。 - user1860754
1
将此添加到您的CSS中。
*{padding:0px;
margin:0px;}
1
html, body {
    margin: 0;
    padding: 0;
}
谢谢你的回答。这是一个图形问题，photoshop的“保存为Web”实际上创建了那个空间（不知道为什么）。但一旦我从“另存为”保存文件后，它就可以正常工作了。 - user1860754
0
根据我对问题的理解，我创建了一个fiddle来解决您的问题。请在这里找到fiddle here。
我在div周围添加了边框并设置了高度，以便清楚地显示图像周围没有白色空间。
.class-of-div{
    background: #00b5ff url('http://instafynd.com/problem.PNG') no-repeat 34px 4px;

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

如果这解决了你的问题，请告诉我。

谢谢您的回答。这是一个图形问题，Photoshop的“保存为Web”实际上创建了那个空间（不知道为什么）。但是一旦我从“另存为”保存文件，它就可以正常工作了。 - user1860754
0
这是Photoshop和类似应用程序上的“保存为Web选项”引起的问题。我在iPad上使用Adobe Illustrator Draw时也遇到了同样的问题。如果你用来制作图像的应用程序没有“另存为”选项，而只有“导出为Web”，那么可以尝试使用类似于“预览”（Mac）或Windows上的画图工具来裁剪它。
0
尝试将display属性设置为inline-block或block，以适用于您的图像。如果可以使用css3，请使用background-size: cover;。您还可以使用background-position: top left;或类似的属性。
0

图片出现问题。请下载或创建其他图片。这不是CSS的问题。

0
谢谢您的回答。这是一个图形问题，Photoshop 的“保存为 Web”实际上创建了那个空格（不知道为什么）。但一旦我从“另存为”保存文件，它就可以正常工作了。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接