定位背景图片,添加填充

我想添加背景到一个div,位置正确的中心,但是,有一些填充图像。 div为文本填充,所以我想稍微缩进背景。 可能最有意义w /例如:

谢谢!

你可以使用与背景颜色相同的10px边框来伪装:

http://jsbin.com/eparad/edit#javascript,html,live

#hello { border: 10px solid #e8e8e8; background-color: green; background: url("http://www.costascuisine.comhttp://img.dovov.combuttons/collapseIcon.gif") no-repeat scroll right center #e8e8e8; } 

这实际上很容易完成。 你几乎在那里,做你的background-position: right center; 。 在这种情况下真正需要的是非常类似的东西。 我们把它们转换成百分比。 我们知道这个center = 50% ,所以这很简单。 现在,为了得到你想要的填充,你需要像这样定位背景: background-position: 99% 50%

第二个,也是更有效的方法是使用相同的background-position想法,只使用background-position: 400px (width of parent) 50%; 。 当然,这个方法需要一个静态宽度,但是每次都会给你同样的东西。

方法1(99%50%)
方法2(400px 50%)

你可以使用background-origin:padding-box; 然后添加一些你想要的填充,例如: #logo {background-image: url(your/image.jpg); background-origin:padding-box; padding-left: 15%;} #logo {background-image: url(your/image.jpg); background-origin:padding-box; padding-left: 15%;} #logo {background-image: url(your/image.jpg); background-origin:padding-box; padding-left: 15%;}这种方式,您可以将图像附加到包含它的div填充框,以便您可以将其放在任何位置。

实际上有一个本地解决scheme,使用四个值的背景位置

.CssClass {background-position: right 10px top 20px;}

这意味着从右侧10px,从顶部20px。 你也可以使用三个值 ,第四个值将被计为0。

首先,要成为一个henpeck,最好不要使用<background>标签。 而是使用适当的,更具体的<background-image>标签。

我意识到做这种事情的唯一方法就是通过扩展遮罩来在图像中填充填充。 由于空像素没有被剥离,所以你的填充就在那里。 所以如果你需要一个10像素的边框,在你的图像周围创build10像素的空像素。 在Photoshop,Fireworks,GIMP和c中,这是很简单的。

我也build议尝试PNG8格式,而不是垂死的GIF …好多了。

如果我们更了解如何使用它,可能会有一个替代scheme解决您的问题。 :)它看起来像你试图添加手风琴button。 这将是最好的放置在HTML中,因为那么你可以用JavaScript / PHP的目标; 如果它在后台(至less不是简单的),你不能做的事情。 在这种情况下,你可以使用下面的样式来修改当前CSS中的图像:

 #hello img { padding: 10px; } 

WR!

为了在背景图像之前添加空间,可以定义使用“背景图像”对象的元素的“宽度”。 然后在“background-position”属性中定义一个像素值,从左侧创build空间。

例如,我有一个场景,我有一个导航菜单,在链接项目之前有一个项目符号,如果相应的链接变成激活状态,项目符号graphics可以改变。 另外,活动链接也有一个背景色显示,这个背景色在链接项的左右两侧都有大约15px的填充(左边还有链接的子弹图标)。

而填充右键实现的目的是将背景颜色拉伸到链接文本右侧多达15px。 填充左侧仅添加到链接文本和项目符号之间的空格。

所以我从PSDdevise(例如82px)中获取背景颜色对象的宽度,并将其添加到li元素(在创build的类中以显示活动状态),然后将background-position值设置为20px。 导致从左边缘向内移动的子弹图标。 它提供了我想要的输出之前留下的填充图标用作背景图像之前的填充。

请注意,您可能需要相应地调整填充/边距值,这可能会用于链接项目之间的空间,也可能用于项目符号图标和链接文本之间的间距。