12

我有一个标题元素，我想在其中放置背景图像，但我想把它放在最后。因此，无论文本的宽度是多少，它都会在文本结束后始终保持不变。可能的？如何？

<h1>Here is my dynamic text</h1>
4

8 回答 8

25

如果你想把它放在文本后面，你应该使用伪元素：

h1:after { content:url(myimage.png); }

样品在这里。

如果你想拥有一个真实的背景图像，你只能在将 更改为 时执行此h1操作display:inline，否则元素将拉伸到其父元素的整个宽度，从而失去对包含文本大小的所有引用。

所有其他解决方案（包括这里提到的其他解决方案）都需要更改 HTML 标记，因此不是纯 CSS 解决方案。

于 2013-06-24T08:08:54.297 回答
4

像这样的东西：

h1
{
background-image:url(https://s.gravatar.com/avatar/c6a0ac3e18f1cd8d0f1be4c2e3a4cfbd?s=32&d=identicon&r=PG);
background-repeat:no-repeat;
background-position:right;
padding-right:40px;
display:inline-block;
}
<h1>Here is my dynamic text</h1>

所以背景图像向右填充，所以它总是在你的文本之外。这display:inline-block很重要，因为它会阻止您的测试填满整条线

于 2013-06-24T08:09:27.440 回答
3

只需在该背景图像的一个跨度上作为 的子级<h1>，如下所示：

<h1>Here is my dynamic text <span class="chevron"></span></h1>

CSS：

h1 {
   position: relative;
}

.chevron {
   background: url(images/chevron.jpg) no-repeat 0 0;
   width: xxpx;   /* width and height of image */
   height: xxpx;
   position: absolute;
   right: 0;
   top: xxpx;  /* adjust the position of the image to the heading text from the top */
}
于 2013-06-24T08:08:53.217 回答
3

你可以在你的 CSS 中使用 :after

h1:after
{
   background:url(image path)no-repeat;/* apply your image here */
    content:" ";
    position:absolute;
    width:999em;
    height:25px;
    margin:10px 0 0 5px;
}

例如http://jsbin.com/uzorew/1

于 2013-06-24T08:13:20.597 回答
0

您可以尝试添加带有背景 img 的 div

<h1>Here is my dynamic text <div id="dynamicimage"></div></h1>

#dynamicimage{
  background-image: url("images/myimg.png");
}
于 2013-06-24T08:08:07.517 回答
0

我可以确定这个CSS：

h1 {
    height:25px;
    overflow:hidden;
    position:relative;
}
h1:after {
    background:red;/* apply your image here */
    content:" ";
    position:absolute;
    width:999em;
    height:25px;
    margin:0 0 0 5px;
}

你的 html ：

   <h1>Here is my dynamic text </h1>
于 2013-06-24T08:09:24.983 回答
0

伪元素背景图片

尽管已经有几个答案建议使用 CSS :after，但没有一个（在我发帖时）显示如何处理图像的大小。

下面您将看到，当（如其他几个答案所示）设置为时，可以将设置背景图像的标准语法应用于空。contentpositionabsolute

widthandheight属性将设置伪元素的尺寸，after但需要通过background简写或background-size属性设置图像大小。

即设置图像大小以匹配after元素的大小，使用：

background: url( path to image ) no-repeat center/contain;

将在哪里center/contain居中并包含图像;-)

请注意，在下面的代码段中，图像大小未正确设置，结果显然不正确：

h1:after {
    position: absolute;
     /* no size or position settings */
    background: url(https://lorempixel.com/200/200/) no-repeat;
    width: 1em;
    height: 1em;
    margin-left: .5em;
    content: "";
}
<h1>Here is my dynamic text</h1>

但是在下面的代码片段中，图像大小已正确设置，结果非常棒：

h1:after {
    position: absolute;
     /* size and position set properly */
    background: url(https://lorempixel.com/200/200/) no-repeat center/contain;
    width: 1em;
    height: 1em;
    margin-left: .5em;
    content: "";
}
<h1>Here is my dynamic text</h1>

要调整after伪元素本身的大小，请更改width和height属性，如下所示：

h1:after {
    position: absolute;
     /* size and position set properly */
    background: url(https://lorempixel.com/200/200/) no-repeat center/contain;
     /* width and height of container reduced */
    width: .5em;
    height: .5em;
    margin-left: .5em;
    content: "";
}
<h1>Here is my dynamic text</h1>

正如Tepken在他的回答中指出的那样，使用该top属性来调整垂直对齐方式。但是，请确保after的父级也具有其position属性集，否则图像将认为top是相对于其祖父母之一：

h1 {
     /* the parent must have its position set also */
    position: relative;
}
h1:after {
    position: absolute;
     /* size and position set properly */
    background: url(https://lorempixel.com/200/200/) no-repeat center/contain;
     /* width and height of container reduced */
    width: .5em;
    height: .5em;
    margin-left: .5em;
    content: "";
     /* vertically align the image */
    top: .35em;
}
<h1>Here is my dynamic text</h1>

于 2017-05-28T01:58:01.733 回答
-2

非常简单 <div class="content"><h1>Header<img src="one.jpg"></h1></div>

在标题中包含图像

于 2013-06-24T08:12:41.660 回答