CSS 和绕过部分裁剪的角落答案

【问题标题】：CSS and getting around partially cropped cornersCSS 和绕过部分裁剪的角落
【发布时间】：2011-03-31 06:09:08
【问题描述】：

我有一个在 Photoshop 中制作的简单圆角矩形的 png。我希望显示整个矩形，但是在图像的右上角、右下角和左下角有一点裁剪，使它成为正方形。左上角是 4 个中唯一一个保持圆角的。

我将图像保存在 Photoshop 中，并在所有 4 面留出了一点额外空间 - 将其保存为 870 * 335 像素。我的 CSS 如下所示：

 #main {
     margin: 8% auto 0 auto;
     width: 870px;
     height: 335px;
     background: url(images/form.png) 125px 87px no-repeat;
     position: relative;
}

我在 Photoshop 中给它的额外空间应该显示整个矩形正确吗？还是我错过了一些关键的东西？谢谢！

【问题讨论】：

你可能需要在 html 框中用 css 给它一些空间，试试padding:20px 看看会发生什么。

标签： css photoshop

【解决方案1】：

这部分对我来说没有意义：

background: ... 125px 87px ...;

如果图像的宽度与其容器的宽度相同，则您将图像强制置于不允许显示整个内容的背景位置。

试试这个：

background: url(images/form.png) 0 0 no-repeat;

【讨论】：

正是...125px 87px 正在设置一个background-position 来偏移您的图像

【解决方案2】：

如果您正确使用精灵，在背景图像上使用背景定位没有任何问题。但是，您是否尝试将实际容器（#main）向左移动 125 像素并向下移动 87 像素？以这种方式使用背景定位将无法实现您想要做的事情。

如果是这种情况，请尝试改用填充。如果没有，请告诉我们。你能提供一个链接到你的工作吗？如果您没有 Firebug，它是必不可少的。

【讨论】：