背景-剪辑:填充框不工作(背景)

Question

哈罗！

请看下面的代码：

​

body{
  background:#000;
}

#banner{
  height:80px;
  position:relative;
  
  background:red;
  border-radius:3px;
  overflow:hidden;
}

#banner::before{
  /*make pseudo-element take up all space*/
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  width:100%;
  
  /*tricky part*/
  background:linear-gradient(to right, #1d2021, transparent);
}

<div id="banner">
  text
</div>

​

在我测试的所有浏览器上，背景都会变暗(你可以在左边的角落看到红色的斑点)。当我寻找解决方案时，它告诉我应该使用名为padding-box的东西，但它似乎在这里不起作用。

这里我漏掉了什么？

Answer 1

我目前的解决方法是：

​

body{
  background:#000;
}

#banner{
  background:linear-gradient(to right, #1d2021, grey);
  height:80px;
  
  border-radius:15px;
  overflow:hidden;
  
  position:relative;
}   

#banner::before{
  content:'';
  background:red;
  opacity:.2;
  
  position:absolute;
  top:0;
  bottom:0;
  width:100%;
}

<div id="banner">
  text
</div>

​

上述解决方法有几个缺点：

opacity:.2导致

1. 图像不清晰的原因

从我在这里看到的，：：

• 元素必须包含背景图像

Answer 2

当系统计算圆角位置时，似乎(虽然没有证实)这些点只由“正常”像素的一部分组成。这是非常明显的，如果你画一个更大的横幅，并使其方形和圆形(边界半径: 50%)。

对于这里的直接问题，我们可以通过保持伪元素背景不变，但将横幅背景从红色更改为线性渐变来获得所需的效果，而不是小红点：

background:linear-gradient(to right, transparent 3px, red 3.1px, red 100%);

这通过仅为前3个(CSS)像素绘制透明颜色来作弊。至少在我做的实验中，(我的)人眼不能分辨出有一个3px的地方，红色和顶部的灰色没有混合在一起。如果这一点变得明显，我们可以放入一个更复杂的线性梯度，只有顶部和底部的3px方块才是透明的，但我怀疑这是否有必要。

下面是完整的代码片段：

​

body{
  background:#000;
}

#banner{
  height:80px;
  position:relative;
  
  background:linear-gradient(to right, transparent 3px, red 3.1px, red 100%);
  border-radius:3px;
  overflow:hidden;
}

#banner::before{
  /*make pseudo-element take up all space*/
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  width:100%;
  
  /*tricky part*/
  background: linear-gradient(to right, #1d2021, transparent);
}

<div id="banner">
  text
</div>

​