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 的演示

您可以看到左上角和左下角的边框是圆形的。但是右上角和右下角不是圆角的。我们怎样才能使图像的所有角落都变圆？

我尝试将z-index,添加overflow: hidden到两个 div 中，但没有运气。

编辑：

此问题仅适用于 Google Chrome。在 Firefox 浏览器上运行良好。

4

3 回答 3

2

这似乎是一个 Chrome 错误，您应该考虑将其提升为 @ http://code.google.com/p/chromium/issues/list

position: relative现在，您可以通过更改为“解决它”position: static

一个黑客修复

如回答here，您可以添加一个-webkit-mask-image到父元素来隐藏溢出的内容：

.video_thumb {
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
于 2012-10-12T12:31:34.973 回答
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 回答
0

刚刚更新了你的小提琴。希望这能解决您的问题。

演示

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

从此类 (.video-thumbnail) 中删除了固定宽度，并将背景大小放在要添加图像/视频的标记中。

于 2012-10-12T12:32:08.693 回答