Opera border-radius는 배경 모서리를 숨기지 않습니다.

Question

in this jsfiddle처럼 상단에 .text_bg 클래스의 상자 #text을 만들었습니다.

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