想要使用 flexbox 在图像上覆盖 div

Question

我有一系列使用 flexbox 排列的缩放三角形，它们会根据窗口的拉伸方式变得越来越小。我想让这些覆盖在图像的底部，给它一种撕纸或山峰的效果。他们将覆盖的图像缩放以适应窗口，并且三角形必须跟随图像，随着窗口放大和缩小。

我在想出解决这个问题的方法时遇到了很多困难，我需要一些帮助。

这就是我希望三角形和图像的外观和相互关联的方式，此屏幕截图中的三角形为黑色，图像为灰色。

http://i.imgur.com/KkXq9pc.png

这是项目的 jsfiddle 链接：http://jsfiddle.net/wD2r2/

CSS：

.triangle-up {
margin: 0 auto;
width: 50%;
height: 0;    
padding-left:50%;
padding-bottom: 50%;
overflow: hidden;
}
.triangle-up:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left:-9999px;
    border-left: 9999px solid transparent;
    border-right: 9999px solid transparent;
    border-bottom: 9999px solid #000000;
    }

.triangle-container {
    display: flex;
    }

.overlay {
    top: -100px;
    left:0px;
    right:0px;
    z-index: 1;
    position: relative;
    margin-top: 10px;
    }

HTML：

<div>

<div>
    <img style="width:100%;" src="images/treeline.jpg" />
</div>

<article class="overlay">
    <div class="triangle-container">
        <article>
            <div class="triangle-up" />
        </article>
        <article>
            <div class="triangle-up" />
        </article>
        <article>
            <div class="triangle-up" />
        </article>
        <article>
            <div class="triangle-up" />
        </article>
        <article>
            <div class="triangle-up" />
        </article>
        <article>
            <div class="triangle-up" />
        </article>
    </div>
</article>

</div>

我想避免三角形相对于图像向上或向下或沿窗口两侧移动的效果。我一直在努力让它一直沿着底部运行并适当地扩展，但没有运气。

非常感谢。

Answer 1

这有点问题，所以我将按顺序解释我所做的一切。

1。棕色/黄色条的容器

为了获得底部的那两个棕色和黄色条，您需要一个容器来存放它们。由于它们周围是黑色的，我只是创建了一个 100% x 40px 的黑色背景 div：

.bottom
{
    background: black;
    width: 100%;
    height: 40px;
}

2。创建棕色和黄色条

由于棕色和黄色条在同一行并且是块，我创建了两个宽度为 43% 和一侧边距为 7% 的 inline-block 元素，并设置了正确的背景颜色：

.brown, .yellow
{
    display: inline-block;
    width: 43%;
    height: 20px;
    margin: 20px 0 0 0;
}

.brown
{
    background: brown;
    margin-left: 7%;
}

.yellow
{
    background: yellow;
    margin-right: 7%;
}

3。图片边框

由于图像周围有灰色边框，因此我将图像框大小模式设置为边框框，这样图像大小就不会改变，并且我在所有边上添加了 20 像素的填充。然后我将背景设置为灰色，以使图像周围的空间成为正确的颜色：

img
{
    padding: 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;

    background: #888;
}

JSFiddle

Answer 2

我做了这个flexbox text overlaying on an image

.wrapper {
  display: flex;  
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

.header {
  background: tomato;
}

.footer {
  background: lightgreen;
}

.main {
  text-align: left;
  background: url(https://raw.githubusercontent.com/212mr/608m02SamsungS8/master/image/1482233503439.jpg) no-repeat 0 0;
				background-size: cover;
				-webkit-background-size: cover;
				-moz-background-size: cover;
				-o-background-size: cover;
}

.aside-1 {
  background: gold;
}

.aside-2 {
  background: hotpink;
}

@media all and (min-width: 600px) {
  .aside { flex: 1 auto; }
}

@media all and (min-width: 800px) {
  .main    { flex: 3 0px; }
  .aside-1 { order: 1; } 
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

body {
  padding: 2em; 
}

<div class="wrapper">
  <header class="header">Header</header>
  <article class="main">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
  </article>
  <aside class="aside aside-1">Aside 1</aside>
  <aside class="aside aside-2">Aside 2</aside>
  <footer class="footer">Footer</footer>
</div>

首先，你需要制作你的 flexbox。 其次，将图像（作为背景图像）放入您的 flexbox 子项中。 第三，把你的文字叠加在图像上。