具有背景渐变和填充的内联文本答案

【问题标题】：Inline text with background gradient and padding具有背景渐变和填充的内联文本
【发布时间】：2021-11-08 22:21:30
【问题描述】：

我一直在寻找问题的解决方案，但我还没有找到解决方案。下面的文章有点帮助：

Inline text - background color with padding

如果文本很长并转到下一行，我希望在背景中有一个渐变并在所有边上相应地填充。

它应该看起来像这样：

.mytext h1 {
    display: inline;
    padding: 5px 10px;
    background: linear-gradient(#0095DB, #00509F);
    color: white;
    font-family: sans-serif;
    font-size: 40px;
    margin-bottom: 5px;
    line-height: 1.6em;
}

.mytext1 h1 {
    background: linear-gradient(#0095DB, #00509F);
    color: white;
    display:inline;
    white-space:pre-wrap;
    font-family: sans-serif;
    font-size: 40px;
    margin-bottom: 5px;
    line-height: 1.6em;
    padding: 5px;
    padding-left:0px;
}
    
.mytext2 h1 {
    margin-left: 16px;
    background-color: #00509F;
    color: #FFFFFF;
    display:inline;
    white-space:pre-wrap;
    font-size: 40px;
    line-height: 1.6em;
    font-family: sans-serif;
    padding: 5px;
    padding-left:0px;
    box-shadow: -16px 0 0 #00509F;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

<div class="mytext">
  <h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</h1>
</div>

<div class="mytext1">
  <h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</h1>
</div>

<div class="mytext2">
  <h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</h1>
</div>

PS：box-shadow 由于渐变而没有帮助

提前致谢

【问题讨论】：

标签： html css

【解决方案1】：

您已经掌握了使用box-decoration-break: clone; 的技巧，只需将其应用于您的第一个示例

.mytext h1 {
    display: inline;
    padding: 5px 10px;
    background: linear-gradient(130deg,#0095DB, #00509F);
    color: white;
    font-family: sans-serif;
    font-size: 40px;
    margin-bottom: 5px;
    line-height: 1.6em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

<div class="mytext">
  <h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</h1>
</div>

【讨论】：

【解决方案2】：

您必须将90deg 添加到线性渐变并将display: inline 更改为display: inline-block

    .mytext h1 {
    display: inline-block;
    padding: 5px 10px;
    background: linear-gradient(90deg, #0095DB, #00509F);
    color: white;
    font-family: sans-serif;
    font-size: 40px;
    margin-bottom: 5px;
    line-height: 1.6em;
}

<div class="mytext">
  <h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</h1>
</div>

【讨论】：