如何在标题文字后面显示背景图片？

debugcn 发表于 Dev

娜伦·维玛

我有一个图像条，并且必须将该图像显示为标题的背景。

我尝试过，但是遇到一个问题，问题是，第一个边缘和最后一个边缘显示不正确。我的意思是开始图像和结束图像显示不正确。另外，图像边框显示得很直。

.red_strip {
  background-image: url('http://www.hgsitebuilder.com/files/writeable/uploads/basekit-template-images/hostgator443_hostgator574_headergreenbgpaint.png');
  background-size: cover;
  background-repeat: repeat;
  background-position: center;
  width: 100%;
}

<div class="heading">
  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing<br /> elit, sed do eiusmod tempor incididunt ut <span class="red_strip">labore et dolore magna aliqua.</span></h2>


  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing<br /> elit, sed do eiusmod <span class="red_strip">tempor incididunt ut labore et dolore magna aliqua.</span></h2>

  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing<br /><span class="red_strip"> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></h2>


</div>

尼采什

将red_strip课程更新为

.red_strip {
  background-image: url(http://www.hgsitebuilder.com/files/writeable/uploads/basekit-template-images/hostgator443_hostgator574_headergreenbgpaint.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

background-size: 100% 100%; 属性将水平和垂直拉伸背景图像

.red_strip {
  background-image: url(http://www.hgsitebuilder.com/files/writeable/uploads/basekit-template-images/hostgator443_hostgator574_headergreenbgpaint.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

<div class="heading">
  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing<br /> elit, sed do eiusmod tempor incididunt ut <span class="red_strip">labore et dolore magna aliqua.</span></h2>
  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing<br /> elit, sed do eiusmod <span class="red_strip">tempor incididunt ut labore et dolore magna aliqua.</span></h2>
  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing<br /><span class="red_strip"> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></h2>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。