html - 标题右填充不能按预期工作

标签 html css wordpress

我根据以下设计创建了一个网站:

enter image description here

如您所见,主标题后面有浅蓝色背景。 到目前为止,我使用了“padding-right”来实现这种广泛的背景效果,并在类上使用了背景属性,但它搞砸了,只有文本被浅蓝色背景覆盖。没有那么宽的背景效果。我尝试将类切换到每个标题的 ID(#title1、#title2 等...),但随后整行都被浅蓝色背景填满,我需要它更短。

这是 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,并且给了它们相同的margin-right 单元,但是它们并没有按照设计对齐。我还尝试将所有标题向左对齐,然后我没有得到这条长长的蓝色背景线,但背景似乎与此处的高度不同:

enter image description here

如果您想查看网站,可以在这里找到:www.mayabarber.co.il

谁能告诉我如何从设计中达到同样的效果?

谢谢!

最佳答案

您尝试这样做的方式有点笨拙。我为您创建了一个更简单、更灵活的解决方案,以便您了解它应该如何工作:

首先,我将标题作为同级放置在段落附近。 接下来,我将 :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>

关于html - 标题右填充不能按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50972475/

相关文章:

javascript - 在样式表中快速切换 rems 和像素

html - 皇家 slider 不同颜色的缩略图

javascript - 未捕获错误 : INDEX_SIZE_ERR: DOM Exception 1, getImageData

javascript - 防止页面加载 Electron 之间的白色闪光

css - 嗨,类不适用于焦点上的输入元素

php - 存储用于 wordpress 主题的全局值

python - CMS 或 web 框架一个简单的项目

javascript - jQuery - 动态更改具有相同 id 标签类名的元素

html - CSS 内容中的页面标题

javascript - 在页面向下滚动时创建固定位置的文本,然后停止在某个位置