Question

有插件可以做到这一点，但我确信必须有一个更简单的方法。

我的帧图像在帧图像的内部和外部都是透明的。

我有一个引导旋转木马。

我想将框架放在旋转木马的顶部。我希望它们在调整浏览器大小时同时缩放。

如何简单地将div嵌套在另一个div中？

HTML：

<body>
<div flex layout="column" class="outer">
    <div class="top">
        <span class="left-spacer"></span>
    <span class="page-header">
        ART
    </span>
    </div>
    <div class="middle">
        <div class="middle-constrained">
            <div>
                <img class="artFrame" src="{{artFrame}}">
                <app-image-slider></app-image-slider>
            </div>
        </div>
    </div>
    <span class="artSpacer"></span>
    <div class = "artTextboxes">
        <span class="artText">
                “Oh, well, okay, I’ll say, “Congratulations. That’s what we have here. I mean, the press. I don’t care. All Americans living here and for the country will be further destroyed. So we get nothing. What do we have."
        </span>
        <span class="artText">
                "Now, Ford announces a few weeks ago. And I come in from different places. I go to China. They are building other candidates, they literally do whatever the hell kind of energy it is – I don’t want it.”
        </span>
        <span class="artText">
                “I mean – and no matter where we go we fill up the Second Amendment, and leaving only the bad guys and terrorists with guns. No good. Not good.""
        </span>
    </div>
    <span class="artSpacer2"></span>
</div>
</body>

CSS：

@import url('https://fonts.googleapis.com/css?family=Bungee|Bungee+Shade');
@import url('https://fonts.googleapis.com/css?family=Anton|Fjalla+One|Karla');

body {
    display: flex;
}

.outer {
    display: flex;
    flex-direction: column;
    background-color: #5BC8AF;
}

.top {
    flex: 1;
    order: 1;
    display: flex;
    justify-content: flex-center;
}

.left-spacer {
    flex-basis: 95%;
    background-color: #5BC8AF;
}

.page-header {
    padding: 0px;
    background-color:  #5BC8AF;
    flex: 1;
    height: 4vh;
    margin-right: 20px;
    margin-bottom: 5px;
    font-family: 'Bungee', cursive;
    font-size: 2em;
    vertical-align: middle;
    color: #B6DBDE;
 }

 .middle {
    order: 2;
    display: flex;
    overflow:hidden;
    flex-wrap: wrap;
    background-image: url('Melanie.png');
    background-color: rgba(255,153,153,0.6);
    background-blend-mode: lighten;

 }


 .middle-constrained {
    flex-basis: 30%;
    order: 2;
    display: flex;
    align-content: stretch;
    flex-direction: row;
    flex: 1;
    flex-wrap: wrap;
 }

  .artFrame {
    flex: 1;
 }

 .artSpacer {
    order: 3;
    height: 500px;
 }

  .artSpacer2 {
    order: 5;
    height: 500px;
 }

 .artTextboxes {
    order: 4;
    display: flex;
 }

 .artText {
    flex-basis: 33%;
    height: 200px;
    margin: 20px;
    padding: 30px;
    font-family: 'Karla', sans-serif;
    font-size: 1.2em;
    line-height: 2;
    text-align: justify;
    flex-wrap: wrap;
    justify-content: space-around;
    background-color:  #B6DBDE;
    color: #67327A;
    border-radius: 10px;
 }

 .artText:nth-child(2) {
    background-color: #A7D3D7;
 }

 .artText:nth-child(3) {
    background-color: #99CCD1;
 }


app-image-slider {

    flex:1 ;
    margin: 20px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

Answer 1

因此，一个解决方案是将父级div设置为相对然后父级内的两个图像，重叠的一个设置为相对位置，而底部图像设置为绝对位置（您将需要多个最大高度）父div上的宽度和宽度虽然提供了某种约束：像这样

编辑：在jsfiddler示例中为.middle-constrained添加了边框和受限父div。

https://jsfiddle.net/j9s1n0n7/2/

        <div class="parentOver">
            <img class="artFrame" src="https://www.mantidproject.org/images/c/ce/Mocking.jpg">
            <img class="overlapImg" src="https://www.transparenttextures.com/patterns/debut-light.png">
            <app-image-slider></app-image-slider>
        </div>

和css

.artFrame {
flex: 1;
position: absolute;
top: 0;
left: 0;
}

.overlapImg {
position: relative;
top: 0;
left: 0;
}

.parentOver {
 position: relative;
 top: 0;
 left: 0;
 max-height: 300px;
 }

我不确定这个设置是否会与您的旋转木马很好地配合使用，因此您需要使用它。你的前沿形象至少需要。

另一种选择是将旋转图像设置为css中的背景图像，将透明图像设置为html中的图像，但我相信如果不进行一些严格的修改，这会破坏您的旋转木马功能。

Answer 2

你需要框架围绕所有图像吗？您可能会在旋转木马周围创建一个div，它具有您想要的帧的CSS。

将框架放在Bootstrap Carousel周围

2 个答案: