圍繞引導傳送帶把框架

有插件，做到這一點，但我覺得肯定必須有一個更簡單的方法。圍繞引導傳送帶把框架

我有一個幀PNG即內部和幀圖像以外是透明的。

我有一個引導傳送帶。

我希望把框架上的傳送帶上。我希望它們在瀏覽器調整大小時同時縮放。

我如何做到這一點簡單的，嵌套另一個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; 
}

來源

2017-07-26 Davtho1983

看着你的框架，我會用'border：10px solid＃000'爲圖像 – Morpheus

所以，一個解決辦法是有一個父DIV與它的位置設置爲相對，則母公司內部的兩個圖像，而在圖像設置爲位置絕對的重疊一組相對定位（您需要多少左右，最大高度和寬度上家長的div給它某種約束雖然）：像這樣

編輯：爲增加邊界和限制家長的div .middle受限於jsfiddler例如

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圖像透明的，但我可以肯定，如果沒有一些嚴重的修改會殺了你的旋轉木馬的功能。

來源

2017-07-26 15:09:26

好的謝謝你的幫助。 flexbox和位置的組合：絕對似乎不起作用。我需要flexbox，所以我找到了一種使用相同嵌套div方法的方法，但是使用justify-content：center和align-self：center。不幸的是，它不是一個完整的修復因爲我現在對我的Angular工具欄有問題，但這是一個單獨的問題，我會發布另一個問題。標記爲您的修復 – Davtho1983

你需要的幀被周圍的所有圖像？你可能會在具有你想要的框架的CSS的旋轉木馬周圍創建一個div。

來源

2017-07-26 14:28:59

是的，我在旋轉木馬周圍使用div，但是當我將img放入div中時，旋轉木馬會在其下面包裹。我可以使用z-index將框架浮在頂部，但我無法正確定位或選擇下方的輪播 – Davtho1983

您是否有一個代碼示例以及如何添加框架div？ –

編輯問題以包含代碼 - 文本來自特朗普語音生成器 - 比Lorem Ipsum更好！ – Davtho1983

圍繞引導傳送帶把框架

回答

相關問題