将图像添加到可调高度部分的底部

Question

我正在尝试在Web应用程序上创建CSS设计。我要去随风飘扬的旗帜。我希望横幅扩展/滚动其高度，以便所有文本都将显示在横幅上，但是无论横幅有多高，我都希望在横幅的底部添加一个撕开的部分。在所有情况下，横幅的宽度均相同。

类似于下面的示例（原谅可怕的Paint屏幕截图）：

我似乎无法全神贯注于如何实现这一目标。你们中任何一个聪明人都有什么主意吗？

Answer 1

首先，我想如果您可以提供到目前为止的示例，这将对您有所帮助。例如，高度可调div的HTML和CSS是什么，仅底部没有图像？更容易添加到此。

我认为最好的方法是在可调整元素的底部添加一个图像元素（假设它是<div>）。将其定位为绝对，并将其相对于其父容器的底部设置。您可能需要花些时间才能使其正常工作。别忘了还将父级的位置设置为相对。

如果您想查看有史以来最糟糕的示例，请转到此处：https://jsfiddle.net/c2ptfv8o/

关于位置的进一步详细阅读：https://developer.mozilla.org/en-US/docs/Web/CSS/position

Answer 2

给出容器元素“ position：relative”（以创建新的定位上下文）和一些底部填充（以为图像留出空间）。然后，您可以使用设置在容器底部的背景图像，而不必垂直重复，也可以将图像绝对定位在底部。

Answer 3

您可以为此使用伪元素。这样，您不需要为每个元素添加额外的标记。

import React from 'react';
import { Button } from 'react-native';
import { withNavigation } from 'react-navigation';

class MyBackButton extends React.Component {
  render() {
    return <Button title="Back" onPress={() => { this.props.navigation.goBack() }} />;
  }
}

// withNavigation returns a component that wraps MyBackButton and passes in the
// navigation prop
export default withNavigation(MyBackButton);

根据“横幅卷发”的高度，在.myDiv上设置一个空白边距。

或者直接地，没有绝对的，只要您没有填充：

.myDiv {
  position: relative;
}

.myDiv::after {
  content: url(image.jpg);
  display: block;
  position: absolute;
  left: 0;
  top: 100%; /* will be placed immediately where the div ends */
  width: 100%;
}