标题背景 3 种颜色在同一行

Question

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

<h3 class="heading">Heading</h3>

我有一个带有 3 种背景颜色的标题，我该怎么做请建议，以供参考我附上图片，请帮忙

Answer 1

使用CSSgradient

.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";
}

<h3 class="heading">Heading</h3>

Answer 2

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

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

<h3 class="heading">Heading</h3>

Answer 3

您可以为背景定义一个 CSS 具有清晰颜色边界的渐变

eg: background: -webkit-linear-gradient(left, grey, grey 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% );
}

<h3 class="heading">Heading</h3>

Answer 4

您可以创建一个 div，然后在 div 中放置三个具有独特背景和适当宽度的 span。现在，在第一个跨度中放置您的 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;
                }

标题背景 3 种颜色在同一行

heading background 3 color in same row

html

css

background