Question

我在其顶部创建了一个包含#text类的.text_bg框，您可以看到in this jsfiddle。

在Firefox，Chrome和IE中，它显示正常，你可以在那个jsfiddle中看到，但在Opera中，盒子的圆角不会削减背景。

我该如何解决这个问题？此问题的类似主题提示了背景剪辑和背景原点，但似乎都不适合我。

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;
}

Opera边界半径不隐藏背景的角落

1 个答案: