DIVS在彼此之上。是否可以仅使用CSS执行图像上显示的内容？

Question

这就是我想要实现的目标。可以只使用CSS还是必须使用图像？

感谢。

Answer 1

sdleihssirhc的答案很棒，如果你想使用一个字段集，如果你想让它保持divs玩这个jsfiddle：

http://jsfiddle.net/qT3Hz/1/

这里我使用位置相对并将其放在另一个div的中心并将其移到容器外。

注意：这是使用css3圆角，所以没有css3支持的浏览器会看到方角。

Answer 2

这是我的看法：

http://jsfiddle.net/U69Fv/

<fieldset class="content">
    <legend class="title">Lorem Ipsum</legend> 
</fieldset>

.title{
    margin:0 auto -1.25em;
    padding:.25em;
    width:25%;
    text-align:center;
    background-color:#fff;
    color:#000;
    border: 5px solid #ffce96;
    border-radius:8px; 
}

.content{
    margin:0 1em;
    padding:4em;
    background-color:#efdefe;
    border: 5px solid #ffce96;
    border-radius:8px;
}

编辑：该死的，我的东西总是太慢了。哦，从现在开始有很多选择。

Answer 3

使用border-radius和<legend>的

Here's a simple proof of concept：

HTML：

<fieldset>
    <legend>hello, world</legend>
</fieldset>

CSS：

fieldset {
    background:#eee;
    border:3px solid #ffd099;
    border-radius:10px;
    height:3em
}

legend {
    background:white;
    font:.75em/1.75 "Trebuchet MS", Helvetica, sans-serif;
    border:3px solid #ffd099;
    border-radius:5px;
    width:10em;
    text-align:center
}

根据您尝试支持的浏览器，答案是

是的，只有CSS才有可能。

...或者您是否只想将其保留为<div>元素？

Answer 4

您可以使用“position：relative”并使用“top，right，left或bottom”移动元素，您可以发布代码吗？