1

我想在 CSS 容器中包含一些图像，但它们不采用容器的格式。我正在寻找的效果是一个图像的背景，然后是其他图像的背景。

最大的问题是我的主要容器

    border-radius:50px;

创建一个漂亮的圆形背景图像。但是，我不希望我的内部图像是圆形的。

我试试

div.innerimage img{ 
    border-radius: 0px;
}

为了消除这一点，但他们会留下来。如何阻止这种以前的格式被继承？

4

5 回答 5

2

您需要添加!important

div.innerimage img{ 
    border-radius: 0px !important;
}
于 2013-06-08T06:27:31.520 回答
0

您需要将 img 带到您已经设置边界半径的 div 容器之外

例如：

<div class="containter">
    <div class="bgimage"></div>
    <img src="you_image_path" />
</div>

CSS：

.containter{position:relative;height: 100px;width:100px}
.bgimage{position: absolute; width: 100px;height:100px;top:0;left:0}
.containter img{position: absolute; width: 100px;height:100px;top:0;left:0}
于 2013-06-08T06:24:05.767 回答
0

这个例子工作正常 http://jsfiddle.net/YMr5y/1/

<div>   
<img width="100" height="100">
<div class="innerimage">
     <img width="100" height="100">
</div>


div img
{
border-radius:50px;
background-color:black;
width:100px;
height:100px;
}
div.innerimage img{ 
border-radius: 0px;
}

我需要你的 html 来猜测真正的问题

于 2013-06-08T06:33:35.493 回答
0

您需要覆盖父元素的样式。

#container img {
    border-radius:50%;
    margin:10px;
}
#container .innerimage img {
    border-radius: 0px;
}

我猜你有类似我在jsfiddle 上创建的 html。

希望这可以帮助。

于 2013-06-08T07:14:13.687 回答
0

最简单的解决方案是将 CSS 类或 ID 附加到背景元素，并将 附加border-radius到该类。

然后，如果你需要指定border-radius:0你的内部元素，它将优先，而不需要!important.

于 2013-06-08T07:24:24.153 回答