2

背景画像の側面をプロパティで丸めようとしていborder-radiusます。

これが私のシナリオです：

小さな区画に大きな画像を背景として配置し、オーバーフローを非表示にしました。次に、小さな除算を丸める必要があります。小区画の角を見事に回った。しかし、画像の角は丸くなっていません。

HTML:

<div class="video_thumb">
    <div style="background-image: url(http://img.youtube.com/vi/mAYX42saxkI/0.jpg); " class="video-thumbnail"></div>
</div>​

CSS

.video_thumb {
    height: 250px;
    width: 300px;
    overflow:hidden;
    margin:20px;
    border: 1px solid red;
    z-index:100;
    position:relative;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.video-thumbnail {
    width: 520px;
    height: 100%;
    position: relative;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-position: center;
    z-index:10;
    overflow:hidden;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

これはjsfiddleを使用したデモです

左上と左下の境界線が丸くなっていることがわかります。ただし、右上隅と右下隅は丸められていません。画像のすべての角を丸くするにはどうすればよいですか?

両方の div に , をz-index追加しようとしましたが、うまくいきませんでした。overflow: hidden

編集：

この問題は Google Chrome でのみ発生します。Firefox ブラウザでは正常に動作します。

4

3 に答える 3

2

これは Chrome のバグのようです。@ http://code.google.com/p/chromium/issues/listとして報告することを検討してください。

position: relative今のところ、次のように変更することで「回避」できます。position: static

ハッキーな修正

ここで回答したように、親要素にa を追加し-webkit-mask-imageて、オーバーフローしたコンテンツを非表示にすることができます。

.video_thumb {
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
于 2012-10-12T12:31:34.973 に答える
0

Just Updated your Fiddle. Hope this will solve your problem.

DEMO

http://jsfiddle.net/saorabhkr/e94q3/13/

Removed fixed width from this class (.video-thumbnail) and put background-size in your markup where you are adding image/video.

于 2012-10-12T12:32:08.693 に答える
0

このコードを試してみてくださいhttp://jsfiddle.net/shubhanshumishra/e94q3/10/ラッピング div と画像付き div の両方に境界線の半径を設定する必要はありません。

コードは次のとおりです。

.video-thumbnail{

background-image: url(http://img.youtube.com/vi/mAYX42saxkI/0.jpg);;

width: 300px;

height: 250px;

border: 8px solid #666;

 border-radius: 10px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

}

プロパティを使用して、background-position必要な領域をクリップできます。また、プロパティを使用しbackground-sizeて背景画像を必要に応じて引き伸ばすこともできます。

更新されたフィドルへのリンクは次のとおりです。http://jsfiddle.net/shubhanshumishra/e94q3/14/

于 2012-10-12T12:20:48.383 に答える