如何在标题文本后面显示背景图像？答案

【问题标题】：How to display the background image behind heading text?如何在标题文本后面显示背景图像？
【发布时间】：2019-12-10 06:50:11
【问题描述】：

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

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

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

【问题讨论】：

为了防止你的图片被剪切，你需要 background-size contain
将padding: 0 15px 添加到.red_strip。
我试图遏制，但它没有按预期工作。它正在显示链接prnt.sc/q8nhix
只需删除“背景尺寸：封面；”来自“.red_strip”类，这应该可以解决您的问题
您是否通过添加填充来检查您的代码？

标签： html css background-image html-heading

【解决方案1】：

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

【讨论】：

给我一些时间检查一下
@NarenVerma 好的
是的，您的回答对我来说非常有效。给我一些时间来确认我的另一个标题。
@NarenVerma 好的

【解决方案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%;
                }

【讨论】：

给我一些时间检查一下
我试过你的答案，它也可以工作，但不是 100% 如果我使用 102% 变化的小边框并且我使用不重复并删除位置。与nitheesh答案相同。从我这边投票
@NarenVerma 我的回答和 Nitheesh 的回答是一样的，我比他早 4 分钟回答。不知道为什么没有得到绿色勾号。我使用了 102%，以便图像包含整个文本。不过，谢谢！！
是的，你的答案是第一位的，并在关于评论中添加了解释。

【解决方案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>

【讨论】：

请查看答案

【解决方案4】：

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

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

删除<span class="red_strip">

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

【讨论】：

为什么red_strip没有h2标签？
h2 像 div 即全宽和 span 像文本，如果你想在 h2 标签中设置孔 h2 背景使用类，如果你想在背景中使用文本更好的方法使用标记。
我不想在整个 h2 标签上显示图像。只是 h2 的一小部分
好的，所以使用 background-size: 100% 100%;在您的 red_strip 跨度类中