Html div中的图像在：之后还是：之前？

我试图在一个div的右边有一个背景图像，它不能覆盖整个div

现在是这样的（div1是背景色）：

---

但是，有没有可能在div1中显示图像而不将其作为div？比如使用

：在
之后、
：在
之前还是其他什么？我只希望div
图像
显示在div1的右侧，宽度为X。
对于要在伪元素上显示的背景图像，如：：after和：：before，应包括
内容：“”在他们身上

我已经修复了（您试图使用类选择器将ID作为目标）并添加了上面提到的背景图像。但事情是这样的：


.div1{
背景：#324458；
颜色：#FFF；
字号：0.9em；
字体大小：粗体；
填充：10px；
宽度：100%；
位置：相对位置；
边界半径：4px；
高度：40px；
明确：两者皆有；
溢出：隐藏；
}
.div1：：之后{
内容：''；
背景：url（“https://unsplash.it/200/300");
背景位置：中心；
背景尺寸：封面；
不透明度：0.3；
高度：39px；
利润率：-10px；
宽度：300px；
位置：绝对位置；
右：10px；
边框右上角半径：4px；
边框右下半径：4px；
z指数：0；
}

正文
 > p>有几种方法将图像放置在div的右边。您应该考虑用如下的图像标记显示图像：


另外，在html中定义ID，然后在css中需要使用
的isntead。检查

一种方法是：

HTML:

<div id="div1">content</div>
<img id="image" src="url"/>

#div1 {
   display:inline-block;
   float:left;
}

#img {
   float:left;
}

默认情况下，div容器会一直拉伸其宽度，以100%匹配其父容器的宽度。设置“display:inline block”将使其包装其内容，并允许将不同的容器（包括图像）堆叠到两侧。
这是对：before和：after的测试，通过该测试，您可以在每个HTML元素之前和之后放置文本或图像

p.test:before {
    padding-right: 5px;
    content: url(/pix/logo_ppk.gif);
}
p.test:after {
    font-style: italic;
    content: " and some text after.";
}

你有你想要达到的效果的图像吗？是的，这是可能的。@Paulie_D是的……只需使用一个定位的伪元素而不是实际的div。其他任何东西都不需要更改。哦…然后移除溢出：隐藏的
@P.Nick您的视口可能很小，因为我们将：：before与背景图像一起使用，所以它将显示在第一个div的背景上。如果您希望背景图像与div1的宽度相对，可以将：：after的宽度设置为父级的50%或所需的比例（如果希望图像在较大宽度上保持300px，则始终可以设置最大宽度）。
#div1 {
   display:inline-block;
   float:left;
}

#img {
   float:left;
}

p.test:before {
    padding-right: 5px;
    content: url(/pix/logo_ppk.gif);
}
p.test:after {
    font-style: italic;
    content: " and some text after.";
}