铁血"边界"由于包装元素上的背景颜色而显示border-radius:50%;

时间:2014-12-17 12:50:22

标签: css css3 background-color

当我正在尝试制作一个动画人物(悬停时的过渡)时,我发现当我应用border-radius时,<figure>的背景显示在边缘附近:50%它,即使我的图像应该占用所有可用空间。

有关说明问题的快速演示,请查看http://codepen.io/anon/pen/KwMMKz

HTML

<figure>
  <img src="http://placehold.it/400x400" alt>
  <figcaption>Demo</figcaption>
</figure>

CSS

figure {
  background-color: red;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  overflow: hidden;
  position: relative; /* For caption */

}

img {
  border-radius: 50%; /* Forced on image for smooth transition */
  width: 100%;
  transition: opacity 1s ease-out;
}

figcaption {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  color: hotpink;
  text-align: center;
  transition: top 1s ease-out;
}
figure:hover img {
  opacity: 0;
}
figure:hover figcaption {
  top: 50%;
}

请注意:我知道将背景颜色放在图上:悬停是一种解决方法,但我更感兴趣的是这种“锯齿状边框”外观出现的原因

我的猜测是,它与浏览器的AA渲染(或相关内容)有关,它对<figure>元素的处理方式与<img>等媒体元素不同,但我可以'在网上找到任何证据。这是一个错误,它是一个“功能”,还是我可以实际修复的东西?

最后,我也知道我可以在这里使用transform: translateY();来制作动画,但这不是我的问题的一部分,所以请不要将其作为答案。

更新17/12 14:03

看来这个问题不是border-radius独有的:50%。当包装器包含border-radiusoverflow: hidden结合使用时,当包装器包含的内容等于或大于包装器的尺寸时,就会出现此问题。

更新17/12 14:14

在包装元素上使用overflow: hidden,在包含的图像(或任何其他子元素)上使用border-radius似乎都不是原因,因为它们可以互换,像素化边缘仍然会出现。

这似乎表明这个问题完全是由2个DOM元素位于完全相同的位置引起的,当任何类型的border-radius应用于包装元素并且子元素的可见区域仅限于父母的。

4 个答案:

答案 0 :(得分:0)

它似乎确实是浏览器处理border-radius如何为容器的圆角提供平滑边缘的“功能”。图像背景以相同的方式消除锯齿(但因为透明没有效果),可以通过设置img背景颜色看到。

当边框消除锯齿时,它会“渗透”到背景中以柔化边缘,因此您会在图像周围看到“锯齿状”环,就像在月球周围看到日冕一样一次完整的日食。

问题始终存在,无论是否覆盖了消除锯齿的对象,如果要绘制圆形然后对其进行反锯齿,您会看到圆圈比抗锯齿版本略窄。大多数抗锯齿算法会聚合对象的周围像素,而不是其中包含的像素。

要克服它,您需要使图像足够大以覆盖消除锯齿边缘占用的空间或减少容器,使消除锯齿区域小于图像。

答案 1 :(得分:0)

http://codepen.io/marczking/pen/KwMgaR

所以在玩完之后(使用background-image和伪元素,不做任何改变......)你会发现只有在应用圆角时才能看到这个亮边框。所以我在这里假设它必须做浏览器渲染CSS的方式,CSS规则没有错误^^)

<figure>
  <figcaption>Demo</figcaption>
</figure>

figure {
  background-color: red;
  width: 400px;
  height: 400px;
  border-radius: 100px;
  position: relative; /* For caption */

}
figure::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: url("http://placehold.it/400x400") no-repeat;
  border-radius: 100px; /* Forced on image for smooth transition */
  transition: opacity 1s ease-out;
}

figcaption {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  color: hotpink;
  text-align: center;
  transition: top 1s ease-out;
}
figure:hover::before {
  opacity: 0;
}
figure:hover figcaption {
  top: 50%;
}

答案 2 :(得分:0)

你可以添加一个不透明度为0的新标签,然后淡出图像淡出。

&#13;
&#13;
figure {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  overflow: hidden;
  position: relative; /* For caption */
}

background {
  background-color: red;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  overflow: hidden;
  opacity: 0;
  position: fixed;
  z-index: 5;
  transition: opacity 1s ease-out;
}

img {
  border-radius: 50%; /* Forced on image for smooth transition */
  width: 100%;
  transition: opacity 1s ease-out;
  position: relative;
  z-index: 100;
}

figcaption {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  color: hotpink;
  text-align: center;
  transition: top 1s ease-out;
  z-index: 10000;
}
figure:hover img {
  opacity: 0;
}
figure:hover background {
  opacity: 1;
}
figure:hover figcaption {
  top: 50%;
}
&#13;
<figure>
  <background></background>
  <img src="http://placehold.it/400x400" alt>
  <figcaption>Demo</figcaption>
</figure>
&#13;
&#13;
&#13;

请注意我添加了background代码,并从background-color

中删除了figure

答案 3 :(得分:0)

我一直有同样的问题,最后使用的是伪元素而不是背景,有点像:

figure::before {
  content: '';
  display: block;
  background-color: red;
  width: 400px;
  height: 400px;
  transform: scale(0.997);
  border-radius: 50%;
}

这让我可以创建伪背景&#39;后来我用 transform:scale(0.997); 缩小了一点,所以它的大小只是相同但略低于可见边缘。当然,在你的情况下,你还需要绝对定位图像,这样就不会被这个:: before。

推到下面