0

div とテキストを含む角が丸い div を作成しようとしています。が機能していないように見えるため、丸みを帯びた角を表示しようとして問題が発生してoverflow:hidden;います。

画像と親 div の両方が必要であることを説明したこの投稿を読んでposition:static;いましたが、それを行うと、.text は画像の上に表示されません。

HTML:

<div class="span8 cell">
    <img src="http://www.placehold.it/400x200">    
    <div class="text">text</div>
</div>

CSS:

.cell {
    width: 400px;
    height: 100%;
    overflow: hidden;
    border-top-left-radius:5px 5px;
    border-top-right-radius:5px 5px;
    border-bottom-left-radius:5px 5px;
    border-bottom-right-radius:5px 5px;
    -moz-box-shadow: 0 1px 3px #000;
    -webkit-box-shadow: 0 1px 3px #000;
    box-shadow: 0 1px 3px #000;
    background: #e5e5e5;
    position: relative;
    margin: 30px;
}

.cell img { position: static; }

.cell .text{
    height: 100%;
    color: #fff;
    font-weight: bold;
    position: absolute;
    top: 0;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    padding: 20px;
    text-align: left;
}?
4

1 に答える 1

0

Chrome では、丸みを帯びた角の上にある要素は角も丸くする必要があります。この例では、次のように画像の角を丸くします。

.cell img {
    border-top-left-radius:5px 5px;
    border-top-right-radius:5px 5px;
    position: static;
}
于 2012-10-05T20:26:27.593 に答える