Html 背景不透明度，不将内容打断为div

我的意思是我有标签和背景图片：url。。。我想知道如何改变背景的不透明度，但不改变子标签的不透明度

这是我的代码：

部分{ 背景尺寸：封面； 边际：0px； 背景：红色； 填充：10px 10px 10px 10px； 背景重复：无重复； 背景位置：中心； } 研究{ 背景图片：url2.jpg； } h1，h2{ 字体大小：1000； 字体大小：60px； 文本对齐：居中； 颜色：黑色； 字母间距：5px； z指数：500； 用户选择：无； } 研究：悬停{ 不透明度：0.8 } 文本 但是文字也变得更轻了！ 使用伪元素：

section {
  position: relative;
  text-align: center;
  padding: 120px 0;

  &:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: red;
    content: '';
    transition: all .15s ease-in-out;
  }
}

h2 {
  position: relative;
  z-index: 1;
}


// Hover
section:hover {

  &:after {
    opacity: .6;
  }
}