在图像上方添加颜色

Question

尽管已经回答了非常相似的问题，但没有一个完全满足我的需求。

在图片顶部添加颜色时，颜色仅覆盖整页。关于如何仅在图片上添加颜色，并保持页面其余部分不变的任何想法？

.section {
  border-bottom-left-radius: 50% 20%;
  border-bottom-right-radius: 50% 20%;
  border-top-left-radius: 50% 20%;
  border-top-right-radius: 50% 20%;
  background-image: url('https://geology.com/world/the-united-states-of-america-map.gif');
  padding-top: 200px;
  padding-bottom: 200px;
}

.section:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(248, 247, 216, 0.7);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <h1>Hello, world!</h1>
</div>


<div class="section">
  <h1> Hello</h1>
</div>

Answer 1

为使position: absolute正常工作，需要定位元素的父级。

  

定位元素是其计算的位置值为相对，绝对，固定或粘滞的元素。 （换句话说，除了静态以外，什么都没有。）Position - MDN

.section {
  background-image: url('https://geology.com/world/the-united-states-of-america-map.gif');
  padding-top: 200px;
  padding-bottom: 200px;
  border-bottom-left-radius: 50% 20%;
  border-bottom-right-radius: 50% 20%;
  border-top-left-radius: 50% 20%;
  border-top-right-radius: 50% 20%;
  position: relative;
  overflow: hidden;
}

.section:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(248, 247, 216, 0.7);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <h1>Hello, world!</h1>
</div>


<div class="section">
  <h1> Hello</h1>
</div>

Answer 2

.section {
  border-bottom-left-radius: 50% 20%;
  border-bottom-right-radius: 50% 20%;
  border-top-left-radius: 50% 20%;
  border-top-right-radius: 50% 20%;
  background-image: url('https://geology.com/world/the-united-states-of-america-map.gif');
  margin-top:100px;
  padding-top: 200px;
  padding-bottom: 200px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.section:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(248, 247, 216, 0.7);
    border-bottom-left-radius: 50% 20%;
    border-bottom-right-radius: 50% 20%;
    border-top-left-radius: 50% 20%;
    border-top-right-radius: 50% 20%;
    padding-top: 200px;
    padding-bottom: 200px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <h1>Hello, world!</h1>
</div>


<div class="section">
  <h1> Hello</h1>
</div>

Answer 3

您可以在部分中嵌套一个绝对定位的元素。然后，该部分不必处于相对位置，就像这样：

var from1 = false;
var from2 = false;

editText1.addTextChangedListener(object : TextWatcher {
    override fun beforeTextChanged(charSequence: CharSequence, i: Int, i1: Int, i2: Int) {}

    override fun onTextChanged(charSequence: CharSequence, i: Int, i1: Int, i2: Int) {}

    override fun afterTextChanged(editable: Editable) {
        if (from2) {
            from2 = false
        } else {
            val value = editText1.text.toString().toDoubleOrNull() ?: 0.0
            from1 = true
            editText2.setText((value * 5).toString())
        }
    }
})

editText2.addTextChangedListener(object : TextWatcher {
    override fun beforeTextChanged(charSequence: CharSequence, i: Int, i1: Int, i2: Int) {}

    override fun onTextChanged(charSequence: CharSequence, i: Int, i1: Int, i2: Int) {}

    override fun afterTextChanged(editable: Editable) {
        if (from1) {
            from1 = false
        } else {
            val value = editText2.text.toString().toDoubleOrNull() ?: 0.0
            from2 = true
            editText1.setText((value * 5).toString())
        }
    }
})

和CSS

<div class="section">
  <div class="color"></div>
  <h1> Hello</h1>
</div>