围绕着一个小的部门中的一个大图像的两边，不是在Chrome中工作 [英] Rounding the sides of a big image contained in a small division not working in Chrome

问题描述

我试图用 border-radius 属性舍入背景图片的两边。

我的场景：

我把一个大图像放在一个小部分作为背景，并将溢出隐藏。现在我需要舍去小师。我成功了小分区的角落。

 < 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浏览器上正常工作。

解决方案

这似乎是一个Chrome错误，你应该考虑提高它@ @ =http://code.google.com/p/chromium/issues/list =nofollow> http://code.google.com/p/chromium/issues/list

现在，您可以通过将 position：relative 更改为 position：static

$ b href =http://stackoverflow.com/a/10296258/681807>在这里回答，您可以将 -webkit-mask-image 添加到父元素隐藏溢出的内容：

  .video_thumb {
 -webkit-mask-image：url image / png; base64，iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA + oJAAAAAElFTkSuQmCC）; 
} 
  

I am trying to rounding the sides of a background image with border-radius property.

Here is my scenario:

I placed a big image in a small division as background and put the overflow hidden. Now I need to round the small division. I successfully rounded the corner of small division. But the image's corner is not rounding.

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;
}

Here is a demo using jsfiddle

You can see the top left and bottom left border are rounded. But top right and bottom right corner are not rounded. How can we make all the corners of image rounded?

I tried adding z-index, overflow: hidden to both divs, but no luck.

EDIT:

This problem is only with Google Chrome. Working fine on Firefox browser.

解决方案

This appears to be a Chrome bug and you should consider raising it as such @ http://code.google.com/p/chromium/issues/list

For now, you can "work around it" by changing position: relative to position: static

A Hacky Fix

As answered here, you can add a -webkit-mask-image to the parent element to hide the overflowing content:

.video_thumb {
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

这篇关于围绕着一个小的部门中的一个大图像的两边，不是在Chrome中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！