1

私はある種のオンライン インデザイン エディターに取り組んでいますが、次の問題に遭遇しました。ページに div を絶対位置で配置しています。その div には絶対位置で画像を配置します。これは、div 内で画像をドラッグできるようにしたいためです。div に境界線の半径を設定していますが、画像はその半径を継承しません。

div と画像の position:absolute プロパティを削除すると、境界線の半径が受け入れられます。しかし、私はそれらを絶対に配置する必要があります。

jsFiddleで例を見つけることができます

ご覧のとおり、Firefox では正しく動作しますが、Chrome や Safari では動作しません。どんな助けでも大歓迎です。

4

3 に答える 3

1

dablet.com のデモ

border-radiusposition: absolute;onのため継承されませんimg

CSS:

.pageelement {
    top:136.583px;
    left:-7.087px;
    height:288.142px;
    width:574.417px;
    position: absolute;
}

.pageelement img {
    width:785.923px;
    height:506.41px;
    left:-192.047px;
    top:-217.37px;
    position: absolute;
}

.pageelement,
.pageelement img {
    -webkit-border-radius: 0px 12px 12px 0px;
            border-radius: 0px 12px 12px 0px;
}

PS。Firefox 3.6 をサポートしていない場合、-moz-接頭辞 for はborder-radiusもう 必要ありません

この回答済みの質問に応じて、この動作はバグです:

「Webkit は、子と孫の境界半径クロッピングを処理できません+. それはちょうど悪いです。ボーダー クロッピングが必要な場合は、階層をさらに下ることなく、画像が配置されている div に直接配置する必要があります。」</p>

それを行う唯一の方法は、イメージをbackground-image要素の として設定しborder-radius、 で配置することbackground-positionです。css-tricks ディスカッションスレッドのChris Coyier経由

于 2012-06-13T07:51:45.057 に答える
1

こんにちは、クラス.pageelement imgでz-indexプロパティを定義することで、目的の結果を得ることができます

これがお役に立てば幸いです........

HTML 

<div class="pageelement">
   <img src="http://placehold.it/350x150">
</div>

CSS

.pageelement {
    top:136.583px;
    left:-7.087px;
    height: 288px;
    width: 593px;
    position:absolute;
    overflow: hidden;
    -webkit-border-radius: 0px 12px 12px 0px;
    -moz-border-radius: 0px 12px 12px 0px;
    border-radius: 0px 12px 12px 0px;
    border:5px solid red;
}
.pageelement img {
    width:785.923px;
    height:506.41px;
    left:-192.047px;
    top:-217.37px;
    position:absolute;
    z-index:-10;

}

デモを参照してください:- http://jsfiddle.net/hTVFR/21/

于 2012-06-13T09:24:40.740 に答える
0 
.pageelement {
    top:136.583px;
    left:-7.087px;
    height:288.142px;
    width:574.417px;
    overflow: hidden;
    position: relative;
}
.pageelement img {
    width:785.923px;
    height:506.41px;
    left:-192.047px;
    top:-217.37px;
    position: absolute;
}

.pageelement, .pageelement img {
    -webkit-border-radius: 0px 12px 12px 0px;
    -moz-border-radius: 0px 12px 12px 0px;
    border-radius: 0px 12px 12px 0px;        
}

残念ながら、pageelementの絶対位置が問題の原因です。それを削除すると、これが機能するはずです！

http://jsfiddle.net/hTVFR/3/

于 2012-06-13T08:16:13.183 に答える