我无法理解为什么背景图案不透明度会降低其上方文本的不透明度（文章名称和文章）。如何制作0％不透明度和背景不透明度为32％的文本？
这是我的代码：
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="main-content">
<h1 class="logo margin-section">Article Name</h1>
<p>Article</p>
</div>
</div>
</div>
CSS看起来像这样：
.col-sm-3 {
background-image: url(../images/pattern.png); opacity: 0.32;
margin-left: 7%;
}