html - 带有 <h1> 标签和图像的 css 虚线边框

Question

我正在尝试使用 <h1> 制作优惠券类型的虚线边框里面的文字和图片。我可以创建文本，但不知道如何将图片也放在那里。

我正在使用 blogger，因为我真的不知道如何编码。这是我到目前为止所拥有的:

<style>h1 {border-style: dashed;
background-color:coral;}</style>
<h1>Never Pay Full Price for Summer Camp Again. Get Free Coupons, Discount & Special Offers from CampCoupons.com!</h1>

我也很想在边框内获取图像，但不知道怎么做。

Answer 1

图像在语义上不是标题，不应放置在 h1(或任何其他 hN 标签)中。而是使用包装 section/aside/div(取决于您的用例)将标题与图像组合在一起，如下所示。

.wrap {
  background: coral;
  border: dashed;
}

<div class="wrap">
<h1>Heading</h1>
<img src="http://placehold.it/400/200/" />
</div>