如何实现背景图片半透明但内部文本完全可见？

你遇到的这个问题很典型——直接给容器设置opacity属性会让它的所有子元素（包括你的标题文本）跟着一起变透明。结合你的Bootstrap项目，我给你两种实用的解决方案：

方案1：用渐变叠加层实现背景半透明 #

这种方法不用额外添加元素，直接在background属性里把半透明渐变和背景图组合起来，既能让背景呈现半透明效果，又不会影响内部文本的清晰度：

#recipebackground{
    /* 用半透明渐变叠加在背景图上 */
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("../imgs/ajiacobackground.jpg");
    height: 50vh; /* 用vh单位适配不同屏幕高度更合理 */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* 移除原来的opacity属性 */
}

你可以调整rgba()里的最后一个参数（0到1之间）来控制背景的透明度，比如改成0.3会更淡，0.7会更深。如果想要深色半透明叠加，把前三个数值改成0,0,0即可。

方案2：用伪元素单独承载背景图 #

如果需要直接调整背景图本身的透明度（而非叠加颜色），可以用容器的伪元素来单独设置背景和透明度，容器本身保持完全不透明：

#recipebackground{
    position: relative;
    height: 50vh;
    /* 容器本身不设置背景和opacity */
}

#recipebackground::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../imgs/ajiacobackground.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.5; /* 只给背景图设置透明度 */
    z-index: -1; /* 把伪元素放到内容下方 */
}

结合Bootstrap优化布局 #

你现在用一堆<br>来调整标题位置，在Bootstrap里可以用flex布局类更优雅地实现垂直水平居中，代码更简洁也更适配响应式：

修改后的HTML部分：

<section id="recipebackground" class="d-flex align-items-center justify-content-center">
    <div class="container text-center">
        <h1 style="font-size: 350%;" class="fw-bold">It's Lunch-Time!</h1>
    </div>
</section>

这里的d-flex让容器变成flex容器，align-items-center实现垂直居中，justify-content-center实现水平居中，fw-bold是Bootstrap的加粗类，比原生<b>标签更符合框架规范。

这样调整后，你的背景图会呈现半透明状态，而标题文本会保持完全清晰的显示效果~

内容的提问来源于stack exchange，提问作者Alejandro Carvajal Sarria