background-position与background-size无法适配元素，能否用该方法实现水平四分？

你的思路完全可行，只是原代码里的background-size和background-position设置存在错误，导致无法正确适配。

原代码问题分析： #

• background-size: 25%仅定义了宽度，高度默认取auto，会让渐变背景无法占满按钮垂直空间
• 第四个背景的background-position: 100% 100%位置错误，导致最后一块背景偏移到底部且超出按钮范围

修正后的代码： #

.ui-button {
  display: block;
  padding: 12px 10px;
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 2em;
  text-align: center;
  text-decoration: none;
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  border: 3px solid #fff;
  border-radius: 2em;
  color: #fff;
  font-weight: 600;
  /* 修正背景设置 */
  background: 
    linear-gradient(180deg, #880021 50%, #B97A57 50%),
    linear-gradient(0deg, #880021 50%, #B97A57 50%),
    linear-gradient(180deg, #880021 50%, #B97A57 50%),
    linear-gradient(0deg, #880021 50%, #B97A57 50%);
  background-position: 0% 0%, 25% 0%, 50% 0%, 75% 0%;
  background-size: 25% 100%;
  background-repeat: no-repeat;
}

<input type="submit" name="submit" class="ui-button" value="start">

关键修正点： #

• background-size: 25% 100%：让每个渐变背景块占按钮25%的宽度和100%的高度，确保填满按钮垂直空间
• background-position调整为0% 0%, 25% 0%, 50% 0%, 75% 0%：四个背景块依次从0%、25%、50%、75%的水平位置开始排列，刚好覆盖整个按钮宽度，实现水平四等分
• 合并重复的.ui-button选择器，减少冗余代码

这样就能实现按钮背景水平分成4个部分，每个部分呈现上下两种颜色的渐变效果。

内容的提问来源于stack exchange，提问作者Jane Smith