将2个图像添加到一个控制<div> </div>

Question

我有<Div>我希望显示2张图片。第一张设置在左上角，另一张设置在右下角。

理想情况下，我想在<Div>上执行此操作，以便内容也位于其中并覆盖图像。

我设法得到了左上角的图像，但我无法弄清楚如何获得最底层的图像。

我的CSS是

.tab-content > .tab-pane,
.pill-content > .pill-pane
{
    display: none;
    background-image: url("../images/brand/QuotationOpen.JPG");
    background-repeat: no-repeat;
    padding-top: 50px;
    padding-left: 25px;
}

我的HTML

<div class="row">
    <div class="col-md-12">
        <ul class="nav nav-GP col-sm-3 col-md-4">
            <li><a href="#Intelligent" data-toggle="pill">Intelligent</a></li>
            <li><a href="#Principled" data-toggle="pill">Principled</a></li>
            <li><a href="#Personal" data-toggle="pill">Personal</a></li>
            <li><a href="#Focused" data-toggle="pill">Focused</a></li>
            <li><a href="#Straightforward" data-toggle="pill">Straightforward</a></li>
            <li><a href="#Energetic" data-toggle="pill">Energetic</a></li>
        </ul>
        <div class="tab-content col-sm-9 col-md-8">
            <div class="tab-pane active">
                <h2>Heading 2</h2>
                <p>Content here</p>
            </div>
            <div class="tab-pane" id="Intelligent">
                <h1>Heading 1</h1>
                <h2>Heading 2</h2>
                <p>Content here</p>
            </div>
        </div>
    </div>
</div>

这给了我

我需要在右下方显示以下图像，这也允许文本过度运行

下面的图片是我在油漆区做的模型，以显示我在

之后的情况

Answer 1

您也可以通过为div分配两个背景图片来完成此操作。

.quote {
  background-image: url("http://i.stack.imgur.com/kXynJ.jpg"), url("http://i.stack.imgur.com/aduet.jpg");
  background-repeat: no-repeat, no-repeat;
  background-position: top left, bottom right;
  height: 200px;
  width: 400px;
}

<div class="quote">Here is some text.</div>

Answer 2

如果有人对没有框架css-classes的解决方案感兴趣，我创建了一个demo jsfiddle：

http://jsfiddle.net/q5dn5589/

HTML：

<div class=wrapper>
    <img src="http://i.stack.imgur.com/Smqyd.jpg">
    <img class="image2" src="http://i.stack.imgur.com/aduet.jpg">
</div>

CSS：

.wrapper {
    position: relative;
    width: 499px;
    height: 213px;
    border: 1px black solid;
}

.image2 {
    position: absolute;
    bottom: 0;
    right: 0;
}

Answer 3

解决了它

尝试绝对定位两张图片并相应定位！

See jSfiddle

<强> CSS

img.first {
    position:absolute;
    top:0;
    left:0;
    z-index:-999px;
}
img.second {
    position:absolute;
    bottom:0;
    right:0;
   z-index:-999px;
}

---

Snippet（看全屏效果）

＆＃13;

＆＃13;

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
 @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
 body {
    margin: 10px;
}
.tab-content > .tab-pane, .pill-content > .pill-pane {
    border:1px solid #ccc;
    padding-top: 50px;
    padding-left: 25px;
}
.tss {
    position:relative;
    display: flex;
    height:300px;
}
h2 {
    z-index:999;
    display:block;
}
img.first {
    position:absolute;
    top:0;
    left:0;
    z-index:-999px;
}
img.second {
    position:absolute;
    bottom:0;
    right:0;
    z-index:-999px;
}

＆＃13;

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
    <div class="col-md-12">
        <ul class="nav nav-GP col-sm-3 col-md-4">
            <li><a href="#Intelligent" data-toggle="pill">Intelligent</a>

            </li>
            <li><a href="#Principled" data-toggle="pill">Principled</a>

            </li>
            <li><a href="#Personal" data-toggle="pill">Personal</a>

            </li>
            <li><a href="#Focused" data-toggle="pill">Focused</a>

            </li>
            <li><a href="#Straightforward" data-toggle="pill">Straightforward</a>

            </li>
            <li><a href="#Energetic" data-toggle="pill">Energetic</a>

            </li>
        </ul>
        <div class="tss tab-pane" id="Intelligent ">
             <h2>Heading 2</h2>

            <img class="first" src="http://i58.tinypic.com/1zm2tmp.jpg" border="0" alt="Image and video hosting by TinyPic">
            <img class="second" src="http://i62.tinypic.com/dyoopu.jpg" border="0" alt="Image and video hosting by TinyPic">
        </div>
    </div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;