Html 两种色调风格背景

发布于07月12日

我只需要这样的双色调背景.

我try 并成功地使用了线性梯度

背景:线性梯度(172deg，#ECB034 50%，#BE883C 50%)；

但它在调整网页大小时有一个问题.它只是没有很好地对准它的角落.表现得很奇怪.这样地

有什么办法吗？

.cta{
  padding: 60px 0;
  背景:线性梯度(172deg，#ECB034 50%，#BE883C 50%)；
  text-align:center;
}

.cta h3{
  font-size: 58px;
  margin-bottom: 30px;
  font-weight: 700;
}

.cta a{
  padding: 16px 49px;
  border: 2px solid #000;
  color: inherit;
  font-size: 20px;
  text-transform: uppercase;
  display: inline-block;
  font-weight: 500;
}

    <div class="cta text-center">
      <div class="container">
        <h3>Let’s talk about your project.</h3>
        <a href="">Get Started ></a>
      </div>
    </div>

推荐答案

这是一个非常简单的SVG修复程序(正如我在 comments 中提到的)，您只需将preserveAspectRatio="none"添加到SVG标记并通过URL编码器运行即可.This one甚至会为您生成CSS，这非常好.

.cta{
  padding: 60px 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25' preserveAspectRatio='none' viewBox='0 0 10 10'%3E%3Crect width='10' height='10' fill='%23ECB034' /%3E%3Cpath d='m0 10 h10 v-10' fill='%23BE883C' /%3E%3C/svg%3E");
  text-align:center;
}

.cta h3{
  font-size: 58px;
  margin-bottom: 30px;
  font-weight: 700;
}

.cta a{
  padding: 16px 49px;
  border: 2px solid #000;
  color: inherit;
  font-size: 20px;
  text-transform: uppercase;
  display: inline-block;
  font-weight: 500;
}

<div class="cta text-center">
      <div class="container">
        <h3>Let’s talk about your project.</h3>
        <a href="">Get Started ></a>
      </div>
    </div>