标题右填充不符合预期

Question

我已经根据以下设计创建了一个网站：

如您所见，主标题后面有浅蓝色背景。 到目前为止，我已经使用'padding-right'来实现这种广泛的背景效果，并在类上使用了background属性，但是它被弄乱了，只有文本被浅蓝色背景覆盖。没有那么宽的背景效果。我尝试将类切换为每个标题（＃title1，＃title2等...）的ID，但随后整行都被浅蓝色背景填充，因此我需要使其更短。

这是HTML：

<p dir="rtl"><span class="bluetitle"><span style="background-color:#dff2f6">headline<font color="#dff2f6">.</font></span></span><span style="font-family: Heebo, sans-serif; font-size: 1.938em; font-weight: 600;"></span></p>

这是CSS：

@media (min-width: 1920px) {
#title1{
padding-right: 27.5% !important;
background-color: #dff2f;
}
}
@media (min-width: 1920px) {
#title2{
padding-right: 21.3% !important;}
}
@media (min-width: 1920px) {
#title3{
padding-right: 37.2% !important;}
}
@media (min-width: 1920px) {
#title4{
padding-right: 23.75% !important;}
}
@media (min-width: 1920px) {
#title5{
padding-right: 26.3% !important;
}}

现在我无法使浅蓝色背景看起来与设计完全一样。以前，我为所有跨度指定了#bluetitle的ID，并为它们提供了相同的右边距单位，但根据设计它们并未对齐。我还尝试将所有标题向左对齐，然后没有得到蓝色背景的长线，但背景看起来好像不像这里一样高：

如果您想检查该网站，可以在这里找到：www.mayabarber.co.il

有人可以告诉我如何从设计中获得相同的效果吗？

谢谢！

Answer 1

您尝试执行此操作的方式有点笨拙。我为您创建了一个更简单，更灵活的解决方案，以便您了解其工作原理：

首先，我将标题放在该段落附近，以作为同级。 接下来，我将:before伪添加到负责持续背景的标题中。这样，您就不必担心标题的大小。背景将适应标题：

body{
  direction: rtl
}
h2 {
  background-color: #dff2f6;
  color: #001a71;
  display: inline-block;
  position: relative;
  animation: do-the-weird-padding-thingy ease infinite 5s;
}

h2:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: #dff2f6;
  width: 100vw;
  left: 100%;
}

.container {
  max-width: 90%;
  width: 600px;
  margin: auto;
  animation: show-how-amazingly-flexible-cool-thingy-it-is ease infinite 10s
}

@keyframes show-how-amazingly-flexible-cool-thingy-it-is {
  0% { width: 600px }
  50% { width: 400px }
  100% { width: 600px }
}

@keyframes do-the-weird-padding-thingy {
  0% { padding: 0 }
  50% { padding: 30px 0 }
  100% { padding: 0 }
}

<div class="container">
  <div>
    <h2>This is just a headline</h3>
  </div>
  
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>