从圆角删除背景

Question

http://i.stack.imgur.com/TP7rY.png

这就是问题所在，我正在尝试，但是我无法从圆角删除该背景色。

HTML

<div id="principal" align="center">
<header>
        <h1>
            <img src="images/pg_img.png" onMouseOver="this.src='images/pg_img_hover.png'" onMouseOut="this.src='images/pg_img.png'";>
        </h1>
    </header>
</div>

CSS

#principal {
    background-color:rgb(255, 255, 255);
    background-color:rgba(255, 255, 255, 0.5);
    margin:20px;
}
#principal header {
    margin:0px;
    width:100%;
}
#principal header h1 {
    border:15px solid black;
    border-radius:20px 20px 0 0;
}

好吧，上面是代码。

Answer 1

看看这是否可以帮助您。

两种方式

#principal {
    background-color:rgba(255, 255, 255, 0.5);
    margin:20px;
    border-radius:20px 20px 0 0;
    overflow:hidden;
}
#principal header {
    margin:0px;
    width:100%;
}
#principal header h1 {
    border:15px solid black;
}

要么

#principal {
    margin:20px;
}
#principal header {
    margin:0px;
    width:100%;
}
#principal header h1 {
    background-color:rgba(255, 255, 255, 0.5);
    border:15px solid black;
    border-radius:20px 20px 0 0;
}

Answer 2

问题是您的background-color在#principal ，并且圆角在#principal header h1

尝试这个

从#principal删除

background-color: rgb(255,255,255);
background-color: rgba(255,255,255,0.5);

并将其移至#principal header h1

#principal header h1 {
    background-color: rgb(255,255,255);
    background-color: rgba(255,255,255,0.5);
}