Html 影响子文本的背景不透明度

这可能是一篇重复的文章，但我似乎找不到解决我的html/css布局的方法，道歉是提前的：

HTML代码：

<section class="palm-section text-center" id="palm-section">
    <div class="palm-img">
        <h1>Palm Hotel</h1>
        <div class="break-line"></div>
    </div>
</section>

输出：

文本受父背景的不透明度影响

更新：

CSS前后都不起作用，将背景隐藏在另一个div中似乎也不起作用

.palm img h1{/*子文本到背景*/
位置：绝对位置；
排名：0；
填充顶部：10px；
字体大小：62px；
颜色：白色；
字体大小：400；
z指数：1；
}
.palm img{/*背景*/
位置：相对位置；
宽度：100%；
填充顶部：150px；
填充底部：100px；
身高：100%；
颜色：白色；
}
.palm img：：之后{
内容：“；
背景：url(https://www.fillmurray.com/500/500)无重复中心固定；
不透明度：0.5；
排名：0；
左：0；
底部：0；
右：0；
位置：绝对位置；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}

不透明文本

.palm img h1{/*子文本到背景*/
位置：绝对位置；
排名：0；
填充顶部：10px；
字体大小：62px；
颜色：白色；
字体大小：400；
z指数：1；
}
.palm img{/*背景*/
位置：相对位置；
宽度：100%；
填充顶部：150px；
填充底部：100px；
身高：100%；
颜色：白色；
}
.palm img：：之后{
内容：“；
背景：url(https://www.fillmurray.com/500/500)无重复中心固定；
不透明度：0.5；
排名：0；
左：0；
底部：0；
右：0；
位置：绝对位置；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}

不透明文本

您可以像这样在

背景中添加透明颜色


background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) ), 
url(https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?cs=srgb&dl=cold- 
vehicles-water-531880.jpg&fm=jpg) no-repeat center center fixed;

Background
接受更多参数，因此首先通过
rgba
像这样添加透明白色
线性渐变（rgba（255，255，255，0.5），rgba（255，255，255，0.5））
。然后添加url。
.palm img h1{/*子文本到背景*/
位置：绝对位置；
排名：0；
填充顶部：10px；
字体大小：62px；
颜色：白色；
字体大小：400；
}
.palm img{/*背景*/
位置：相对位置；
宽度：100%；
填充顶部：150px；
填充底部：100px；
身高：100%；
背景：线性渐变（rgba（255，255，255，0.5），rgba（255，255，255，0.5）），url(https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?cs=srgb&dl=cold-vehicles-water-531880.jpg&fm=jpg）无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
颜色：白色；
背景尺寸：封面；
}

棕榈酒店
您可以像这样在
背景中添加透明颜色


background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) ), 
url(https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?cs=srgb&dl=cold- 
vehicles-water-531880.jpg&fm=jpg) no-repeat center center fixed;

Background
接受更多参数，因此首先通过
rgba
像这样添加透明白色
线性渐变（rgba（255，255，255，0.5），rgba（255，255，255，0.5））
。然后添加url。
.palm img h1{/*子文本到背景*/
位置：绝对位置；
排名：0；
填充顶部：10px；
字体大小：62px；
颜色：白色；
字体大小：400；
}
.palm img{/*背景*/
位置：相对位置；
宽度：100%；
填充顶部：150px；
填充底部：100px；
身高：100%；
背景：线性渐变（rgba（255，255，255，0.5），rgba（255，255，255，0.5）），url(https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?cs=srgb&dl=cold-vehicles-water-531880.jpg&fm=jpg）无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
颜色：白色；
背景尺寸：封面；
}

棕榈酒店