背景图像周围出现空白。
代码如下:
.class-of-div{
background: #00b5ff url(../img/cart.png) no-repeat;
background-position: 34px 4px;
}
这发生在所有浏览器中
背景图像周围出现空白。
代码如下:
.class-of-div{
background: #00b5ff url(../img/cart.png) no-repeat;
background-position: 34px 4px;
}
这发生在所有浏览器中
如果您为图像保留了一个类,请尝试以下代码:
.class-of-div {
background: #00b5ff url(../img/cart.png) no-repeat;
background-position: 34px 4px;
margin: -8px 0 0 -6px;
}
或者干脆使用下面的代码:
body {
margin: 0px;
}
这比上面的非常简单。
不要使用 Photoshop 的“另存为网络” - 改用“另存为”。:)
没有图像,将背景图像的宽度设置为 100%;
background-size:100%;
将此添加到您的CSS
*{padding:0px;
margin:0px;}
html, body {
margin: 0;
padding: 0;
}
根据我对问题的理解,我创建了一个小提琴来解决您的问题。请在这里找到小提琴
我在 div 周围添加了一个边框并设置了一个高度,以便清楚地显示图像周围没有空白。
.class-of-div{
background: #00b5ff url('http://instafynd.com/problem.PNG') no-repeat 34px 4px;
height: 200px;
border:1px solid #f00;
}
让我知道它是否能解决您的问题。
图片有问题。下载或创建其他。不是CSS的问题。
尝试设置 display: inline-block; 或显示:块;到你的形象。如果你可以使用 css3,使用background-size: cover;
你可以使用background-position: top left;
或类似的。
谢谢您的回答。这是一个图形问题,Photoshop“保存为网络”实际上是在创建那个空间(不知道为什么)。但是一旦我从“另存为”中保存了文件。它工作正常。
这是导致此问题的 Photoshop 和类似应用程序上的“保存为网络”选项。我在 iPad 上使用 Adobe Illustrator Draw 时遇到了同样的问题。如果您用于制作图像的应用程序没有“另存为”选项而不是“导出为网络”,请尝试使用“预览”(mac)之类的东西或在 Windows 上绘制来裁剪它。
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>
解决问题的最简单方法是在类中添加以下 css 规则。
overflow: hidden;