Question

我想做一个圆角DIV（只有左上角和右上角）我想通过玩背景位置在一个DIV中设置3个背景。

我有3张图片：

1）leftcorner.png

2）rightcorner.png

3）internalfill.png

这可能吗？如果不是我怎么能用多个div来做呢？

由于

Answer 1

您无法使用当前的CSS支持设置多个背景。即将推出的标准将允许您设置9个图像以进行全边界自定义。目前，您必须使用嵌套的重叠DIV，如下所示：

<div>
    <div>
        <div>
        </div>
    </div>
</div>

Answer 2

目前，无法设置多个背景。但是，最好的做法是嵌套3个div。

<div id="fill_bg">
 <div id="left_corner_bg">
  <div id="right_corner_bg">
   Other stuff here...
  </div>
 </div>
</div>

在你的CSS中确保left_corner_bg没有重复，而right_corner_bg没有重复，并且位于右侧。

Answer 3

你不能在CSS2（这是最广泛采用的标准）中这样做。 CSS3使这个可用，但它目前只有更高级的浏览器才能理解，因此你的观众更少。

通常，您的DIV中还有其他元素，例如<h2>和<p>：

<div>
    <h2>Title</h2>
    <p>Text</p>
</div>

你的CSS会有两个顶角的图像作为DIV的背景，H2和P将具有相同的背景颜色和全宽。 P会有两个底角的背景图像，或类似的东西。

Answer 4

我知道最好的（纯CSS）解决方案是使用添加到http://jqueryui.com/demos/effect/default.html的CSS效果，它基本上只使用moz和webkit圆角属性。要设置2个角的样式，您只需编辑CSS，这样只会更改您感兴趣的2个角。虽然这不会围绕IE的角落，但这取决于你的目标是什么。无论您是想使用JS来实现它还是只是坚持使用CSS。

有关在所有浏览器中执行该操作的JS方法，请参阅http://www.schillmania.com/projects/dialog2/。

Answer 5

正如亚历克斯所说，目前的CSS2支持浏览器并不是真的可行。但是使用HTML，你可以这样做：

<div class='my-panel'>
    <div class='top-left-corner'/>
    <div class='top-right-corner'/>
</div>

然后使用CSS，你会像这样应用你的图像：

.my-panel {
    background: transparent url('internalfill.png');
    position: relative;
}
.my-panel .top-left-corner {
    background: transparent url('top-left.png') no-repeat;
    position: absolute;
    top: 0;
    left: 0;   
    width: 20px;
    height: 20px;
}
.my-panel .top-right-corner {
    background: transparent url('top-right.png') no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
}

这显然有点冗长，可以使用额外的CSS类进行优化，允许您重用宽度/高度属性。还有其他各种方法可以实现这种行为，但我发现这是最简单的，而不使用现代浏览器功能。

Answer 6

当你不能使用表格行时。

我的例子是基于Ben Delarre的例子。请注意，“footer_m”必须在“footer_l”和“footer_l”之前！我用这个html：

<html>
      <body>
        <div id="complex_div">

            <div id="footer">
            <div id="footer_m">
                    <p id="syndicate">



                    </p>

                    <p id="power_by">

                        Powered by <a href="http://www.joomla.org">Joomla!</a>.

                        valid <a href="http://validator.w3.org/check/referer">XHTML</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>.

                    </p>

            </div>
            <div id="footer_l"></div>
            <div id="footer_r"></div>
            </div>

        </div>
      </body>
</html>

我使用这种风格：

<style type="text/css" media="screen">
<!--

div#footer_l {
    background: transparent url(../images/white/frame.png) no-repeat;
    background-position-y: -330px; /* I use the left region of my image */
    background-position-x: -10px;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 30px;
    height: 55px;
}

div#footer_m {
    background: transparent url(../images/white/frameV.png);
    background-position-y: -330px; /* I use a crop of previous image */
    position: absolute;
    top: 0px;
    left: 30px;
    right: 30px;
    height: 55px;
}

div#footer_r {
    background: transparent url(../images/white/frame.png) no-repeat;
    background-position-y: -330px; /* I use the right region of my image */
    background-position-x: -132px;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 30px;
    height: 55px;
}

-->
</style>

是否可以在一个DIV中设置3个背景？

6 个答案: