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标签）内。而是使用包装区/ aside / div（取决于您的用例）将标题与下面的图像组合起来。

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

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

Answer 2

一种解决方案是像这样在CSS中使用<h1>和background-image在background-position中“放置”图像：

#test{
  border : 1px dashed black;
  background-image : url('https://bcs-solution.com/wp-content/uploads/2017/11/Logo_Develop-H100-250x100.jpg;');
  background-repeat: no-repeat;
  height: 100px;
  background-position:0px 15px;
  width: 255px;
}

<h1 id="test">
My title 1
</h1>

Answer 3

一旦您看到这个，我认为这对您很有用。

h1 {
  border-style: dashed; 
  background-color: coral;
  padding-left: 10px;
}

  <h1>h1 heading text</h1>

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

3 个答案: