两个重叠元素的边界半径；背景闪耀 [英] Border-radius on two overlapping elements; background shines through

问题描述

我使用2个重叠的元素制作了CSS进度条.元素的CSS如下:

I've made a CSS progressbar, using 2 overlapping elements. The CSS for the elements is as follows:

#status_progressbar {
  height: 22px;
  width: 366px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #000;
  cursor: pointer;
}
#status_progressbar_progress {
  height: 22px;
  background: #eee;
  float: right;
  -moz-border-radius: 0 10px 10px 0;
  -webkit-border-radius: 0 10px 10px 0;
  border-radius: 0 10px 10px 0;
  /* width controlled by Rails backend, using inline style */
}

不幸的是，如右图所示，父母的背景在右边缘部分可见.由于子元素的背景应该与父元素精确重叠，所以我不知道为什么会这样.

Unfortunately, the background from the parent is partly visible at the right edge, as you can see clearly in this picture. Since the background from the child element should precisely overlap the parent element, I don't know why this is the case.

[在Firefox 4中拍摄的照片]

[Picture taken in Firefox 4]

也许有人可以向我解释为什么会发生这种情况以及如何解决呢?

Maybe someone could explain to me why this is happening and how to solve it?

推荐答案

另一种方法可能是简单地使用status_progressbar div(无子级).创建一个足够宽的图像(例如1000像素)和您选择的颜色(我个人将创建一个白色的50％不透明度).

An alternative COULD be to simply use the status_progressbar div (no children). Create an image that is wide enough (say 1000px) and the colour of your choice (personally i'd create one white 50% opacity).

然后:

#status_progressbar {
  height: 22px;
  width: 366px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #000 url("/path/to/image') repeat-y 0 0;
  cursor: pointer;
}

然后我将使用javascript处理背景位置属性，始终提供px值而不是％，因为％50将使图像居中.

I would then manipulate the background position property with javascript ALWAYS providing a px value NOT a % as %50 would center the image.

var prcnt = (YOURPERCENTAGE/100)* 366;

这篇关于两个重叠元素的边界半径；背景闪耀的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！