css - 如何为左侧和右侧设置两种不同颜色的标题

问题描述

标题左侧和右侧应显示白色和蓝色，而正文背景色为灰色。

左侧区域为白色，顶部带有徽标，右侧区域为蓝色。

使用 colorzilla，我container1为右侧的水平半蓝色制作了背景。然后我加入了一些用于剃刀刀片效果的伪元素。当我设置background-colorbody 时，我意识到标题内带有我的徽标的区域用正文颜色着色。

我读到了linear-gradient 但有人告诉我，使用它我会面临跨浏览问题，因为即使你按照它应该的方式进行操作，仍然有一个版本列表，甚至是不理解它的浏览器。

这正是我发现自己陷入困境的地方。在这种情况下，我需要所有浏览器和版本都理解此代码或尽可能多地理解此代码。请告诉我如何在不使用 Colorzilla 和linear-gradient.

  @media only screen and (min-width: 900px) {
  .container1 {
    width: 100%;
    margin: 0 auto;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+44,1e5799+44,7db9e8+45,1e5799+45,7db9e8+46,7db9e8+46,7db9e8+46,7db9e8+46,7db9e8+46,7db9e8+46,1e5799+46,7db9e8+50,1e5799+50,1e5799+100&0+44,0+46,1+47 */
    background: -moz-linear-gradient(left, rgba(30, 87, 153, 0) 44%, rgba(30, 87, 153, 0) 45%, rgba(30, 87, 153, 0) 46%, rgba(30, 87, 153, 1) 47%, rgba(30, 87, 153, 1) 50%, rgba(30, 87, 153, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(30, 87, 153, 0) 44%, rgba(30, 87, 153, 0) 45%, rgba(30, 87, 153, 0) 46%, rgba(30, 87, 153, 1) 47%, rgba(30, 87, 153, 1) 50%, rgba(30, 87, 153, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(30, 87, 153, 0) 44%, rgba(30, 87, 153, 0) 45%, rgba(30, 87, 153, 0) 46%, rgba(30, 87, 153, 1) 47%, rgba(30, 87, 153, 1) 50%, rgba(30, 87, 153, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#1e5799', GradientType=1);
    /* IE6-9 */
  }
  .logo {
    width: 250px;
  }
  header {
    display: flex;
    justify-content: space-between;
    padding: 0em 3.15em;
  }
  .cont {
    position: relative;
  }
  .cont::before {
    position: absolute;
    content: '';
    width: 40em;
    height: 15rem;
    background: blue;
    bottom: -.8em;
    z-index: -1;
  }
  .cont::before {
    left: 42%;
    transform: skew(-30deg);
  }
  .cont::after {
    position: absolute;
    content: '';
    width: 1.6em;
    height: 10rem;
    background: green;
    bottom: -.8em;
  }
  .cont::after {
    left: 38.9%;
    transform: skew(-30deg);
  }

<div class="container1">
  <div class="cont">
    <header>
      <img src="/images/logo.png" alt="O-Credit logo" class="logo">

      <nav>
        <div id="menu-bar" class="hide-desk">
          <div class="menu" id="menu">
            <div id="bar1" class="bar"></div>
            <div id="bar2" class="bar"></div>
            <div id="bar3" class="bar"></div>
          </div>
        </div>

        <ul class="show-desk hide-mob" id="nav">
          <li id="exit" class="exit-btn close hide-desk">
          </li>
          <li><a href="#">Обрати позику</a></li>
          <li><a href="#">Компанії</a></li>
          <li><a href="#">Види позик</a></li>
          <li><a href="#">Блог</a></li>
          <li></li>
        </ul>
      </nav>

    </header>
  </div>
</div>

带有徽标的标题左侧显示背景白色。同一标题的右侧显示背景蓝色。并将 Body 设置为在除标题之外的所有地方显示背景灰色。

标签： css

css - 如何为左侧和右侧设置两种不同颜色的标题

问题描述

解决方案

推荐阅读