我需要将一串文本分成两种颜色

时间:2017-11-21 20:36:28

标签: html css

我需要拆分

UPDATE ss_remote_inventories t1 JOIN ( SELECT item_name FROM ss_remote_inventories WHERE price_good = 1 GROUP BY item_name HAVING COUNT(*) > 3 ) t2 ON t1.item_name = t2.item_name SET t1.price_good = 0; 部分
<h1 class="brand-heading">DoesThat</h1>
分为两种不同的颜色。 &#34;不&#34;需要是一种颜色,&#34;那&#34;需要另一种颜色。谢谢你的帮助!

4 个答案:

答案 0 :(得分:2)

https://jsfiddle.net/okahara/7hsp3LLj/

<h1 class="brand-heading"><span class="color1">Does</span> <span class="color2">That</span></h1>


.color1 {
  color: red
}

.color2 {
  color: blue
}

您可以使用两个跨度并为它们提供单独的颜色。

答案 1 :(得分:1)

我会改变:

<h1 class="brand-heading">DoesThat</h1>

为:

<h1 class="brand-heading">Does<span class="color-class">That</span></h1>

color-class基于您的CSS。在Bootstrap中,它可能是text-primary或类似的。

答案 2 :(得分:1)

要做到这一点,你需要用span标签包装它。否则只能使用css。

&#13;
&#13;
.brand-heading{
  color: red;
}

.brand-heading span{
  color: blue;
}
&#13;
<header class="masthead">
  <div class="intro-body">
    <div class="container">
      <div class="row">
        <div class="col-lg-8 mx-auto">
          <h1 class="brand-heading"><span>Does</span>That</h1>
          <p class="intro-text">Lorem ipsum dolor sit amet, consectetur 
           adipiscing elit. Nam at erat dui. Aliquam rutrum odio non ante 
           gravida, id efficitur est pellentesque. Morbi blandit leo quis 
           urna facilisis, et pretium ipsum vulputate.</p>
          <a href="#about" class="btn btn-circle js-scroll-trigger">
            <i class="fa fa-angle-double-down animated"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</header>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

您还可以使用background-clipmix-blend-mode (对于任何需要额外标记的身体信息;))。

示例:

mix-blend-mode

.brand-heading {
  position:relative;
  background:white;
}
.brand-heading:before {
  mix-blend-mode:screen;
  content:'';
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  
  background:linear-gradient(to right, 
    tomato 2em,
    lime 2em)
  left  ;

}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap-grid.css" rel="stylesheet"/>
<header class="masthead">
  <div class="intro-body">
    <div class="container">
      <div class="row">
        <div class="col-lg-8 mx-auto">
          <h1 class="brand-heading">DoesThat</h1>
          <p class="intro-text">Lorem ipsum dolor sit amet, consectetur 
           adipiscing elit. Nam at erat dui. Aliquam rutrum odio non ante 
           gravida, id efficitur est pellentesque. Morbi blandit leo quis 
           urna facilisis, et pretium ipsum vulputate.</p>
          <a href="#about" class="btn btn-circle js-scroll-trigger">
            <i class="fa fa-angle-double-down animated"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</header>

background-clip

.brand-heading {
  background-image: linear-gradient(to right, tomato 2em, lime 2em) ;
  background-clip: text;
  color:transparent;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap-grid.css" rel="stylesheet"/>
<header class="masthead">
  <div class="intro-body">
    <div class="container">
      <div class="row">
        <div class="col-lg-8 mx-auto">
          <h1 class="brand-heading">DoesThat</h1>
          <p class="intro-text">Lorem ipsum dolor sit amet, consectetur 
           adipiscing elit. Nam at erat dui. Aliquam rutrum odio non ante 
           gravida, id efficitur est pellentesque. Morbi blandit leo quis 
           urna facilisis, et pretium ipsum vulputate.</p>
          <a href="#about" class="btn btn-circle js-scroll-trigger">
            <i class="fa fa-angle-double-down animated"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</header>