0

你好！

看下面的代码：

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但它似乎在这里不起作用。

我在这里想念什么？

4

2 回答 2

0

当系统计算圆角定位时，看起来（尽管没有证明）这些点仅由“正常”像素的一部分组成。如果您绘制一个更大的横幅并将其设置为方形和圆形（边框半径：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>

于 2020-11-16T17:14:45.590 回答
0

我目前的解决方法：

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>

上述解决方法有一些缺点：

  1. 图像不清晰的原因opacity:.2

  2. 从我在这里看到的， ::before 元素必须包含背景图片

于 2020-11-16T01:59:03.333 回答