Question

我得到了background-image的{{1}}，并希望通过它设置<section>，以便为图像提供暗淡的效果。无法使用background-color，因为效果将扩展到我拥有的子元素（在本例中为标题）。我在我的部分使用了opacity，但看起来背景颜色可能只出现在背景图像后面。

关于如何使它覆盖整个部分而仍然在儿童元素背后的任何想法？

rgba(0,0,0,.5)

body {
  width: 100%;
}
/*Header*/

#header {
  width: 100%;
  background: url(../_img/new_background.jpg) no-repeat center center rgba(0, 0, 0, .5);
  background-size: cover;
  display: -webkit-flex;
  /*For Safari 7 and 8*/
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
}
header {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: space-between;
}
header h1,
header p:last-of-type {
  font-family: "Proxima Nova Extrabold";
  color: white;
  text-transform: uppercase;
  font-size: 3.75em;
  text-align: center;
}
h1 + p {
  font-family: "Palatino";
  color: white;
  font-size: 2.5em;
  text-align: center;
}

Answer 1

使用:before或:after

＆＃13;

body {
    width: 100%;
}
/*Header*/
 #header {
    width: 100%;
    background: url(http://zarech63.ru/sites/default/files/imagecache/product_full/product/motor-lodochnyy-suzuki-dt15as_623487.jpg) no-repeat center center;
    background-size: cover;
    display: -webkit-flex;
    /*For Safari 7 and 8*/
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
}
#header:before{
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5); 
    position: absolute; top: 0; left: 0;
}


header {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: space-between;
    position: relative;
}
header h1, header p:last-of-type {
    font-family:"Proxima Nova Extrabold";
    color: white;
    text-transform: uppercase;
    font-size: 3.75em;
    text-align: center;
}
h1 + p {
    font-family:"Palatino";
    color: white;
    font-size: 2.5em;
    text-align: center;
}

＆＃13;

<!-- Header -->
    <section id="header">
        <header>
            	<h1>Example</h1>

            <p>Example</p>
            <p>Example</p>
        </header>
    </section>

＆＃13;

Answer 2

您可以在元素上拥有多个背景图像。使用CSS3 Linear Gradient图像作为不透明覆盖图并将其放在JPEG图像的前面。

<div id="test"></div>

<p:calendar id="calendar1" value="#{doesn't matter}">
     <f:validateRequired></f:validateRequired>
</p:calendar>

<p:calendar id="calendar2" value="#{doesn't matter}">
     <p:ajax event="dateSelect" listener="#{onDateSelect}"
      partialSubmit="true" update="ContentMessages"/>
</p:calendar>

如何使背景颜色出现在背景图像的顶部

2 个答案: