代码之家 › 专栏 › 技术社区 › Tom

获取要在空白DIV元素中显示的背景图像

css

Tom · 技术社区 · 16 年前

我希望使用一个空白的DIV元素来显示背景图像,但是除非在DIV元素中放置一些内容(例如,一些文本),否则不会显示任何内容。

我需要这样做,因为我想在一些文本旁边显示一个图形,但图形与文本垂直对齐。

如何使背景图像显示在空白分区中?

我的google fu失败了。

<div class="photoInfo">
lorem ipsum | 
<div style="background:url('foo.gif') no-repeat;display:inline;"></div>
</div>

谢谢!

编辑: 下面的代码实际上显示了图像,但我只需要把它剪成2或3个像素,就可以使它完全对齐。

这就是我要实现的,有什么想法吗?

<div class="photoInfo">
    Added<span class="spacer">â¢</span>Wed Apr 01, 2009 1:01 pm<span class="spacer">â¢</span>64.10 KB<span class="spacer">â¢</span>659x878 pixels
    <span class="spacer">â¢</span>
    <img src="/_assets/img/icons/new-photo-small.gif" />
</div>
<!--<div style="height:14px;width:31px;background:url('') no-repeat 0px 5px;display:inline-block;"></div>-->

.photoInfo
{
font-size:0.6em;
color:#b0bad9;
padding-bottom:15px;
text-align:center;
}

7 回复 | 直到 12 年前

jyustman 16 年前

试试看!

one | <span style="padding-left: 20px; background: url('16x16-image.gif') no-repeat; height: 16px">two</span> | three

如果你使用 div 而不是 span ,您需要设置 display: inline 风格也一样。

Mork0075 16 年前

您必须给DIV一个大小,否则它的大小是0px x 0px。

tpdi 16 年前

廉价的工作。在分区中放置非分隔空格( )。

Jeff Atwood 16 年前

如果你不想要任何文本,这在Safari和火狐中都有效(没有测试IE):

one | <span style="padding: 16px 16px 0 0; background: url('16x16-image.gif') no-repeat; font-size: 0"> </span> | three

Shawn 16 年前

背景应该在照片信息上 div ,你可以用 background-position . 高度和宽度为0的内容不能有背景。如果你增加它,它会占用你的设计空间。

GEOCHET S.Lott 16 年前

overflow:hidden 可能会有帮助,或者为DIV指定长度和宽度。

总的来说,我认为还有其他方法可以实现你想要的。如果您只想让文本和图像水平对齐,则可以在不将图像放入 div . 例如,您可以使用 inline 和 float .

Jesse Brown 16 年前

是否尝试在不移动DIV的情况下移动背景图像?

尝试 background-position: xpos ypos;

向下移动3个像素: background-position: 0px 3px;

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

7 月前

Mass · 如何在Tailwind CSS v4中创建配置

7 月前

magenta placenta · 将css变量合并为一个变量

7 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

7 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

7 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

8 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

8 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

8 月前

Luckkks · 过渡色工作不正常

8 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

8 月前