Question

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

请有人知道怎么做吗？

它应该是这样的 https://www.dropbox.com/s/lb4xi6s9rjaa4lw/unnamed.png

如果您需要有关该问题的其他说明，请询问我。

Answer 1

有些东西CSS不能做（或者我不能用CSS做），这种情况就是其中之一。如果你想要这个，你将需要使用一些脚本（不幸的是，数学）。这是我的代码：

<强> HTML

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

<强> CSS

* {
    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;
}

<强> JS

$(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小提琴。

如何使用不透明度在标题周围制作背景，而标题是透明的？

1 个答案: