Css 如何使标题周围的背景不透明度，而标题是透明的？

我知道如何使背景不透明度，并使标题透明。 然而，我把图像作为背景，我希望标题周围有50%的不透明度，因为我希望我的标题是透明的，并且背景图像有清晰的视图部分。 到目前为止，我已经输入了img背景，并设置了50%不透明度的标题，但我需要相反。如果我将背景设置为透明，它甚至会出现在标题中，因此它对我不起作用

请问有人知道怎么做吗

应该是这样的

---

请问我你是否需要对这个问题的更多解释

有些事情CSS做不到（或者我用CSS做不到），本例就是其中之一。如果你想让它工作，你需要使用一些脚本（不幸的是，还有数学）。这是我的密码：

HTML

<div id="picture"></div>
<div id="overlay-left"></div>
<div id="overlay-right"></div>
<header>Lorem ipsum</header>

JS

* {
    margin: 0;
    padding: 0;
}
header {
    border-top: 120px solid rgba(255, 255, 255, 0.5);
    position: absolute;
    left: 50%;
    margin-left: -480px;
    width:960px;
    height: 400px;
    z-index: 100;
    color: white;
}
#picture {
    top: 0;
    position: absolute;
    height: 400px;
    width: 100%;
    background: url("yourbackground.png");
}
#overlay-left {
    left:0;
    height: 400px;
    position: absolute;
    opacity: 0.5;
    background-color: white;
    z-index:100;
}
#overlay-right {
    right:0;
    height: 400px;
    position: absolute;
    opacity: 0.5;
    background-color: white;
    z-index:100;
}

$(document).ready( function() {
 var widtha = ($(window).width() - 960)/2 ; //960 is the width of the box

 $('#overlay-left').css('width' , widtha + "px");
  $('#overlay-right').css('width' , widtha + "px");

});

< jQuery帮助CSS决定它应该覆盖多少，以便在背景图像中间做一个漂亮的盒子。这是响应性的，只要视口宽度大于960，它将始终保持在中心。数学部分是Jquery获取视口宽度，减去长方体的宽度，并将其分为两部分-左和右。然后告诉jquery将值放入CSS中

---

试试看，希望有帮助。如果你需要的话，我会放一把JS小提琴。

你能展示一下你的代码吗。。到目前为止你做了什么…&如果是小提琴，那就太好了。你的整体身体背景是什么？白色？页面的前半部分（从顶部）是图像，其余部分是白色。这只是一个例子，我现在有，但我想相反，图像有不透明，而容器有透明，清晰的看法。我想上传img什么，我到目前为止，但我不能，因为我没有10的声誉。（我有类似于我发布的链接，除了我有标题的容器。）@user3042036这是你想要的吗@KingKing不完全是这样，因为我需要整个标题是透明的，背景图片是透明的。应该是这样的