如何将文本放在模式覆盖CSS的顶部

时间:2015-06-24 08:40:22

标签: html css

可能很容易让人无法工作。我成功地用图案覆盖了背景图像,但现在标题也被放置在图案的后面。我尝试过使用z-index(如下面的代码所示),但它仍无效。有什么想法吗?

结果

enter image description here

的index.html

<div class="content">
        <div class="subheader">
            <div class="container">
                <h1>PROVIDE <br>CREATIVITY IN <br> YOUR BUSINESS</h1>
          </div>
         <div class="pixel-overlay"></div>
      </div>
 </div>

的style.css

.content .subheader {
    width: 100%;
    height: auto;
    display: inline-block;
    padding: 130px 0 0;
    background: url(../images/landing.jpg) no-repeat 50% 0%;
    position: relative;
    background-attachment: fixed;
    text-align: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -ms-behavior: url(../js/backgroundsize.htc);
}

.content .subheader:after {
    content: "";
    background: url(../images/pattern/pattern.png) repeat;
    background-size: 90%;
    background-attachment: fixed;
    opacity: 0.2;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 0;
}

.content .subheader h1 {
    margin-top: 25%;
    z-index: 100;
}

2 个答案:

答案 0 :(得分:1)

尝试在标题中添加position: relative;,如下所示:

.content .subheader h1 {
    margin-top: 25%;
    z-index: 100;
    position: relative;
}

答案 1 :(得分:0)

您的p<-ggplot(net_d,aes(Ratio,D2)) p<-p+geom_point()+geom_line() p<-p+xlab("Multiples of degrees of nodes within community to between community") p<-p+ylab("Faction of vertices classfied correctly") #p<-p+scale_x_continuous(breaks=c(seq(10,1,by=-1))) p<-p+xlim(10,1)+ylim(0.5,1) p<-p+theme_set(theme_grey()) print(p) 未指定.content .subheader h1。因此,position将毫无用处。 尝试添加z-index

position: relative