同一行中的标题背景3颜色[重复]答案

【问题标题】：heading background 3 color in same row [duplicate]同一行中的标题背景3颜色[重复]
【发布时间】：2021-09-14 06:16:27
【问题描述】：

.heading {
    background-color: #FFC20E;
    font-size: 23px;
    font-weight: 600;
    padding: 5px 0px 5px 22px;
    font-family: "Open Sans";
}

&lt;h3 class="heading"&gt;Heading&lt;/h3&gt;

我有一个3背景色的标题，请问我该怎么做，我附上图片作为参考，请帮助

【问题讨论】：

在此处添加一些代码

标签： html css background

【解决方案1】：

您可以为此使用 CSS 渐变。要在渐变中包含纯色、非过渡颜色区域，请包含两个色标位置。色标可以有两个位置，相当于连续两个不同位置的相同颜色的色标。 Here了解更多信息

.heading{
padding:2px;
background: linear-gradient(to left,
      #fffb0e 25%, #ffe30e 25% 50%, #FFC20E 50% 100%);
}

&lt;h3 class="heading"&gt;Heading&lt;/h3&gt;

【讨论】：

@SandyS 不用担心，很高兴我能提供帮助。

【解决方案2】：

使用 CSS gradient

.heading {
background: #fcc601; 
background: -moz-linear-gradient(left,  #fcc601 0%, #fcc601 46%, #ffdb71 46%, #ffdb71 73%, #fff0c5 73%, #fff0c5 100%);
background: -webkit-linear-gradient(left,  #fcc601 0%,#fcc601 46%,#ffdb71 46%,#ffdb71 73%,#fff0c5 73%,#fff0c5 100%);
background: linear-gradient(to right,  #fcc601 0%,#fcc601 46%,#ffdb71 46%,#ffdb71 73%,#fff0c5 73%,#fff0c5 100%);

    font-size: 23px;
    font-weight: 600;
    padding: 5px 0px 5px 22px;
    font-family: "Open Sans";
}

&lt;h3 class="heading"&gt;Heading&lt;/h3&gt;

【讨论】：

【解决方案3】：

您可以将背景颜色边界清晰的 CSS 渐变定义为

例如：背景：-webkit-linear-gradient(left, gray, gray 30%, white 30%, white);

但目前只有少数浏览器支持另请参阅 http://www.webkit.org/blog/1424/css3-gradients/ 了解 CSS3 渐变的解释，包括锐利的颜色边界技巧。

.heading {
    
    font-size: 23px;
    font-weight: 600;
    padding: 5px 0px 5px 22px;
    font-family: "Open Sans";
    background: linear-gradient(to right,
     #ffe30e 50%, #fffb0e 33% 80%, #FFFF8A 33% 100% );
}

&lt;h3 class="heading"&gt;Heading&lt;/h3&gt;

【讨论】：

【解决方案4】：

您可以创建一个 div 并在该 div 内放置三个具有独特背景和适当宽度的 spans。现在，在第一个跨度中放置您的 h3 标签。这是代码， HTML ->

                <div id="heading-div">
                    <span id="span1">
                        <h3>Heading</h3>
                    </span>
                    <span id="span2"></span>
                    <span id="span3"></span>
                </div>

CSS ->

                #heading-div{
                  display: flex;
                }
                #span1{
                  width: 50%;
                  background-color: #feab1e;
                }
                #span2{
                  width: 25%;
                  background-color: #ff8059;
                }
                #span3{
                  width: 25%;
                  background-color: #fff;
                }

【讨论】：

如果这是一个很好的答案，您可以在他的答案中添加一个upvote :)