Question

我目前正在开展一个项目，该项目涉及一个圆圈随机填充某一点的颜色。我使用了一个带有border-radius的div来创建圆圈+ overflow:hidden和另一个div来模仿填充＆＃39;。

HTML：

<div class="circleswrap">           

    <div class="circlediv">
        <div class="circle">
            <div id="animateddiv1">                         
            </div>      
        </div>
    </div>      
</div>

CSS：

    .circle {
            position: relative;
            border-radius: 50%;
            -o-border-radius: 50%;
            overflow: hidden;
            background: #8a8a8a;
            width: 165px;
            height: 165px;
            display: inline-block;
            margin: 0 75px;.
    }

    #animateddiv1 {
            background: #63B23A;
            position: absolute;
            top: 130px;
            width: 200px;
            height: 165px
    }

我的浏览器非常棒，但是我必须让它在一个过时的Opera浏览器上工作，这个浏览器集成到智能显示器中（实际上是不可更新的）。

众所周知，Opera的旧版本不支持border-radius + overflow的组合：hidden + position：relative / absolute

PS：我知道-o-border-radius不是＆＃39;＆＃39;但我试过了......一个男人总能梦想：^）

我一直试图找到解决方案，但我没有想法。

我希望这个精彩的社区可以帮助我：）

Answer 1

这是一个黑暗中的镜头，因为我不知道所需的歌剧版本。但您可以尝试使用background-image: linear-gradient();

像这样：

setInterval(function () {
    var percentage = Math.floor(Math.random() * 100);
    $(".circle").css("background-image", 'linear-gradient( 0deg, #63B23A ' + percentage + '%, #8a8a8a ' + percentage + '%' + ' )')
}, 3000);

This seems to be supported from Opera 11.1

当然不要忘记浏览器前缀-o-

所以代码看起来像这样：

setInterval(function () {
    var percentage = Math.floor(Math.random() * 100);
    $(".circle").css("background-image", '-o-linear-gradient( 0deg, #63B23A ' + percentage + '%, #8a8a8a ' + percentage + '%' + ' )')
}, 3000);

这是一个演示：http://jsfiddle.net/05dkfoxj/2/

祝你好运。

Answer 2

CSS clip-path属性允许您指定SVG形状以用作HTML内容的掩码;这可能是向前迈进的规范方式。

我认为您使用的Opera版本太旧而无法支持此属性，或者可能是以非hacky方式执行您想要的任何其他操作。如果圆圈位于纯色背景上，则可以叠加相同颜色的不透明蒙版，即从中剪切出圆圈的PNG。更加雄心勃勃的是，您可以使用类似this technique之类的东西在画布上动态生成图像，如果它有效，它将允许非实体背景。但这很复杂，如果涉及的任何元素需要响应指针事件，则可能不可行。

或者，如果圆圈的内容只是一张图片而非交互式，您可以使用画布渲染整个图片。即使很老的浏览器也应该处理它，CanvasRenderingContext2D知道如何将绘图剪辑成形状。

Answer 3

如果圆圈与示例中的实心背景相对，则可以创建具有相同颜色背景的PNG或SVG，并将圆形切出并将其用作叠加层。删除.circle元素并将图像放在.circlediv中。它应该给你与你拥有的效果相同的效果。

.circlediv
{
    width: (image width) 
    height: (image height) 
    postition: relative;
}

svg, png
{ 
   z-index: 2;
   width: 100%;
   height: 100%;
   position: absolute;
   /* rest of your styling */
}

#animateddiv1
{
    z-index:1;
    position: absolute;
    bottom:0;
    width:100%;
   /* rest of your styling */
}

我总是倾向于这样做，因为我知道它会起作用，即使我喜欢按照你的方式去做。如果你支持使用border-radius，那么你在旧版本的IE中会遇到问题。

CSS / HTML / border-radius的任何替代方法OR overflow：hidden？

3 个答案: