如何像示例中那样创建h1？

Posted 2021-05-03

我想创建h1标头作为下面的示例。我在某些网站上看到了这种标题，我现在不记得它的地址了。如果我记得的话，可以从他们的网站复制它。不幸的是我忘了。这是PSD的屏幕截图：

_{（来源：hizliresim.com）}

无论如何，无论如何，我仍然无法获得结果。我得到的是：

_{（来源：hizliresim.com）}

这是我的代码：

div.big-header div.header-left h1 {
    float: left;
    color: #fff;
    background: #c00000;
    font: bold 35px "Open Sans";
    padding: 1px 5px;
    margin-bottom: 35px;
}

这里是JSFiddle

问题：如何创建上面的示例标题（第一张图片）

答案

尝试这样：Demo

更新 Demo

更新：刚刚添加了display：inline，带有box-decoration-break的行高以及您的代码。

CSS：

h1 {
    color: #fff;
    background: #c00000;
    font: bold 35px sans-serif;
    padding: 1px 5px;
    margin-bottom: 35px;
    /* newly added code */
    display:inline;
    line-height:44px;
   -webkit-box-decoration-break: clone;
    -ms-box-decoration-break: clone;
    -o-box-decoration-break: clone;
     box-decoration-break: clone;
}

另一答案

在span中使用h1：

h1 {
    float: left;
    color: #fff;
    font: bold 35px sans-serif;
    padding: 1px 5px;
    margin-bottom: 35px;
}

h1 > span {
    background: #c00000;
}

和：

<h1><span>How to create a page with php?</span></h1>