background - Opera border-radius 不隐藏背景的 Angular 落

Question

我创建了一个 #text 框，其顶部有一个类 .text_bg，如您所见 in this jsfiddle .

在 Firefox、Chrome 和 IE 中它显示良好，正如您在 jsfiddle 中看到的那样，但在 Opera 中，框的圆 Angular 不会剪切背景。

我该如何解决这个问题？这个问题的类似主题建议 background-clip 和 background-origin，但似乎都不适合我。

Answer 1

我不明白你为什么要按照现在的方式使用额外的 div。只需将背景设置为 repeat-x，与 div 的顶部对齐。我无法保存到 jsfiddle 来向您展示示例，因此这是更新后的代码。

更新的 HTML:

<div id="text" class="text_bg">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
</div>

更新的 CSS:

#text {
    float: left;
    height: auto;
    width: 328px;
    margin-top: 110px;
    background-color: rgba(40,40,40,0.7);
    padding: 20px;
    padding-top:0px;
    -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    -ms-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    -o-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    margin-left: 110px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    border: 5px solid rgba(255,255,255,1.0);    
    overflow:hidden;
}    

.text_bg {
    background: -webkit-linear-gradient(rgba(0,102,204,1),rgba(0,153,255,1));
    background: -moz-linear-gradient(rgba(0,102,204,1),rgba(0,153,255,1));
    background: -ms-linear-gradient(rgba(0,102,204,1),rgba(0,153,255,1));
    background: -o-linear-gradient(rgba(0,102,204,1),rgba(0,153,255,1));
    background: linear-gradient(rgba(0,102,204,1),rgba(0,153,255,1));
    background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImczOTEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiMwMDY2Q0MiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMwMDk5RkYiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2czOTEpIiAvPgo8L3N2Zz4=);
    background-size: auto 54px;
    background-repeat:repeat-x;
    background-position:top;
    height: 54px;
    width: 120%;
    margin-left:-10%;
    clear: both;
    margin-bottom:-25px;
    border-radius:8px;
}