3

背景图像周围出现空白。

在此处输入图像描述

代码如下:

.class-of-div{

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

background-position: 34px 4px;
}

这发生在所有浏览器中

4

12 回答 12

5

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

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

或者干脆使用下面的代码:

body {
    margin: 0px;
}

这比上面的非常简单。

于 2013-08-07T07:18:03.237 回答
4

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

于 2013-09-05T19:06:25.767 回答
2

没有图像,将背景图像的宽度设置为 100%;

background-size:100%;
于 2013-08-07T06:26:27.150 回答
2

将此添加到您的CSS

*{padding:0px;
margin:0px;}
于 2013-08-07T06:42:01.120 回答
1
html, body {
    margin: 0;
    padding: 0;
}
于 2013-08-07T07:23:26.667 回答
0

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

我在 div 周围添加了一个边框并设置了一个高度,以便清楚地显示图像周围没有空白。

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

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

让我知道它是否能解决您的问题。

于 2013-08-07T06:45:13.807 回答
0

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

于 2013-08-07T07:41:35.010 回答
0

尝试设置 display: inline-block; 或显示:块;到你的形象。如果你可以使用 css3,使用background-size: cover;你可以使用background-position: top left;或类似的。

于 2013-08-07T06:27:52.943 回答
0

谢谢您的回答。这是一个图形问题,Photoshop“保存为网络”实际上是在创建那个空间(不知道为什么)。但是一旦我从“另存为”中保存了文件。它工作正常。

于 2013-08-08T13:35:46.457 回答
0

这是导致此问题的 Photoshop 和类似应用程序上的“保存为网络”选项。我在 iPad 上使用 Adob​​e Illustrator Draw 时遇到了同样的问题。如果您用于制作图像的应用程序没有“另存为”选项而不是“导出为网络”,请尝试使用“预览”(mac)之类的东西或在 Windows 上绘制来裁剪它。

于 2017-04-02T15:28:32.540 回答
0

Sorry for uping this topic, but in 2020 if you put this in html:

<img class="class_nbr_1">

and in your CSS:

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

You'll have a white border, undisplayable. So juste use <p> instead of <img>

于 2020-01-15T10:25:46.757 回答
0

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

overflow: hidden;
于 2021-04-09T15:03:48.120 回答