称呼文本元素有背景

Question

我想知道，如果可以设置一些文字的样式，如下所示：

首先，您会看到文字正在使用<h1>标记。它有背景颜色集，还有max-width属性可将其分为两行。

下面你看到相同的文字，但背景看起来更好，就像我想要的那样。

我的问题是：这可能吗？我们在单词之间看到一些空格，我不确定是否可以这样做，而不会将文本分成2个<h1>标记，例如：

<h1>HEADING</h1>
<h1>WITH GRADIENT</h1>

感谢您的建议。

那是我尝试过的：

 h1 {
    font-weight: 300;
    text-transform: uppercase;
    background: linear-gradient(to right, rgba(40,138,187,0.8) 0, rgba(128,28,75,0.8) 100%);
    padding: 10px 18px;
    display: inline-block;
    margin-bottom: 55px;
    font-size: 60px;
    letter-spacing: 5px;
    max-width: 300px
}

Answer 1

这样的事情怎么样？

＆＃13;

＆＃13;

 h1 {
    display: inline;
    font-weight: 300;
    text-transform: uppercase;
    background: linear-gradient(to right, rgba(40,138,187,0.8) 0, rgba(128,28,75,0.8) 100%);
    padding: 10px 18px;
    margin-bottom: 55px;
    font-size: 60px;
    letter-spacing: 5px;
    max-width: 300px;
    line-height: 1.75;
}

＆＃13;

<h1>Heading With Gradient</h1>

＆＃13;

＆＃13;

＆＃13;

Answer 2

添加此属性box-decoration-break: clone;

＆＃13;

＆＃13;

h1 {
  background-color: #9d7f71;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
  font-size: 60px;
  letter-spacing: 5px;
  width: auto;
line-height: 1.4;
display: inline;
}

＆＃13;

<h1>HEADING WITH GRADIENT</h1>
   

＆＃13;

＆＃13;

＆＃13;

Answer 3

可以使用span代码完成此操作，查看JSFiddle

<强> HTML

<h1>
  <span>HEADING</span><br>
  <span>WITH GRADIENT</span>
</h1>

<强> CSS

<style>
h1 > span{background: #D99680;}
</style>

Answer 4

＆＃13;

＆＃13;

div{
position:relative;
}
h1:first-child{
background-color:brown;
position:absolute;
}
h1:nth-child(2){
background-color:brown;
position:absolute;
  top:50px;
}

＆＃13;

<div>
<h1>HEADING</h1>
<h1>WITH GRADIENT</h1>
  <div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

诀窍是1）使h1成为内联元素，2）将它放在行高比它大的容器中。

header {line-height:1.5; max-width:300px}
h1 {display:inline; text-transform:uppercase; background:#944;}

<header>
  <h1>Heading with&nbsp;gradient</h1>
</header>

Answer 6

试试这个：

mark{
  background:#a47a67;

  }

<h1><mark>HEADING</mark></h1>
<h1><mark>WITH GRADIENT</mark></h1>

Answer 7

<h1>Heading</h1>
<h1>with Gradient</h1>

CSS

h1{text-transform: uppercase;background:linear-gradient(to right, rgba(40,138,187,0.8) 0, rgba(128,28,75,0.8) 100%);padding: 10px 18px;font-size: 60px;letter-spacing: 5px;max-width: 300px}

Answer 8

@Lalji Tadhani 回答帮助了我。 但是在他的代码中，我们有display:inline，然后max-width将无效。 解决方法是将父项添加到<h1>标记，并在我的案例中添加max-width:50%。

<div class="parent">
  <h1>Heading with Gradient</h1>
</div>

.parent { max-width:50% }
.parent h1 {

color: white;
font-size: 44px;
font-family: Poppins;
font-weight: 300;
text-transform: uppercase;
padding: 0 10px;
letter-spacing: 5px;
width: auto;
line-height: 1.9;
display: inline;
background: red;
/* important */
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}

我认为，这是最好的解决方案。谢谢大家解决这个问题。

Answer 9

＆＃13;

＆＃13;

h1 {
  background-color: #9d7f71;
  margin-top:10px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
  font-size: 60px;
  letter-spacing: 5px;
  width: auto;
height:100px;
line-height: 1.4;
display: inline;

}

＆＃13;

<h1>&nbsp;&nbsp;HEADING WITH &nbsp; &nbsp;&nbsp;GRADIENT&nbsp;&nbsp;</h1>

＆＃13;

＆＃13;

＆＃13;