div的CSS边框半径：首次加载伪元素渲染错误后答案

【问题标题】：CSS border-radius of a div:after pseudo element rendering wrong on first loaddiv的CSS边框半径：首次加载伪元素渲染错误后
【发布时间】：2020-05-12 20:03:41
【问题描述】：

我一直在尝试通过使用具有匹配边框半径的 div:after 伪元素来更改图像颜色叠加层。

https://jsbin.com/konopak/1/edit?html,output

您会在第一次加载时注意到背景颜色是一个实心正方形，但如果您移动框架或更改页面上的任何元素，它会正确呈现它。有没有办法让它在第一次加载时正确渲染？为什么会这样？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>

  <style>
    img {
      max-width: 100%;
      height: auto;
      border-radius: 90px;
    }

    .hero-image {
      position: relative;
      max-width: 200px;
      display: flex;
      background-color: #ff000050;
      /* border-radius: 90px; */
    }

    .hero-image:after {
      position: absolute;
      height: 100%;
      width: 100%;
      background-color: inherit;
      top: 0;
      left: 0;
      display: block;
      content: "";
      border-radius: 90px;
    }
  </style>
</head>
<body>
<label id="color-label" style="background-color: #ff0000; height: 18px; width: 18px; border-radius: 10px; cursor: crosshair;">
  <input id="color-tag" type="color" value="#ff0000" style="visibility: hidden;">
</label>

<div class="hero-image">
  <img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=400&w=400" id="cat" alt=""/>
</div>

<script>
  const label = document.getElementById('color-label');
  document.getElementById('color-tag').addEventListener('change', function () {
    label.style.backgroundColor = this.value;
    let imgDom = document.querySelector('.hero-image');
    imgDom.style.backgroundColor = this.value + '40';
    // imgDom[0].style.backgroundColor = this.value;
  });
</script>

</body>
</html>

【问题讨论】：

标签： javascript html css

【解决方案1】：

您可以简单地将overflow: hidden; 添加到父级并删除导致Safari 显示问题的额外border-radius 属性和display: flex。

我建议按照以下内容进行一些更新以帮助图像缩放：

 img {
      width: 100%;
      height: auto;
    }

    .hero-image {
      position: relative;
      max-width: 200px;
      max-height: 200px;
      background-color: #ff000050;
      border-radius: 90px;
      overflow: hidden;
    }

    .hero-image:after {
      position: absolute;
      height: 100%;
      width: 100%;
      background-color: inherit;
      top: 0;
      left: 0;
      display: block;
      content: "";
    }

容器父级的半径+溢出应该是所有需要的，额外的子属性是多余的。

JSbin update

【讨论】：

谢谢。我试图让溢出隐藏起来工作，但无法获得正确的组合。没有边界半径，它什么也不做。知道为什么我不能调整颜色标签的宽度/高度吗？
只需将标签从内联元素更改为块元素：Updated Bin
确认一下，您并没有完全删除border-radius - 只需按照示例代码将其设置在父级上即可。
我仍然想知道为什么当我移动框架时，它实际上会在我的第一个示例中删除多余的部分。这是一些奇怪的错误或绘制操作顺序。
完成。我真的想通了。英雄 div 正在拦截我的点击。感谢您的帮助。