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

Question

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

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

.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>

Answer 1

在标题标签中使用此 class="red_strip"，例如：

<h2 class="red_strip"> 
// Your text
</h2>

删除<span class="red_strip">

还要确保您的 background-size 应该是 background-size: 100% 100%

Answer 2

这样就可以了：

background-size:  102% 102%;

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

Answer 3

.design  {
padding-left:25px;
background:url(http://www.hgsitebuilder.com/files/writeable/uploads/basekit-template-images/hostgator443_hostgator574_headergreenbgpaint.png) no-repeat top left;
display: inline-block;
background-size:100% 100%;
color:white;
}

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


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

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


</div>

Answer 4

将red_stripclass更新为

.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>

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

How to display the background image behind heading text?

html

css

background-image

html-heading