着色填补区域与@media

Question

的WP设置我使用

@media (min-width: 768px) { 
    section { 
    padding: 50px 0; 
    } 
} 

几部分之间自动填充。现在，一个部分我想添加一个背景图像和在它前面的一个灰色的透明盒子：

section { 
    padding: 100px 0; #which does not do anything, can change it to random values. 
} 
section .background1 { 
    background-color: #222222; 
    background-image: url('../img/bg.jpg'); 
    background-repeat: no-repeat; 
    background-attachment: scroll; 
    background-position: center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
} 
section .bg-layer { 
    background-color: rgba(50,50,50, 0.6); 
    top: 0 ; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

我的HTML代码看起来下面一些文字等内部：

<section> 
    <div class="background1"> 
    <div class="bg-layer"> 
     <div class="container"> 

这在原则上工作正常，但填充区域没有填充背景图像，我无法完成这项工作。所以我基本上希望图像和灰色区域扩展到这一节的一般填充区域。任何人都可以帮助或描述最佳的解决方法吗？ Thx一吨！

Answer 1

我想这是你想达到的。

section { 
    padding: 100px 0; 
    background-color: #dddddd; 
} 
section h2.section-heading { 
    text-transform: none; 
    font-size: 40px; 
    margin-top: 10px; 
    margin-bottom: 15px; 
} 
section h3.section-subheading { 
    font-size: 16px; 
    font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    text-transform: none; 
    font-style: italic; 
    font-weight: 400; 
    margin-bottom: 75px; 
} 
section .background1 { 
    background-color: #ffffff; 
    background-image: url('../img/bg.jpg'); 
    background-repeat: no-repeat; 
    background-attachment: scroll; 
    background-position: center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
} 
section .bg-layer { 
    background-color: rgba(50,50,50, 0.6); 
    padding: 50px 0; 
} 
section h2.bg-section-heading { 
    color: white; 
    text-transform: none; 
    font-size: 40px; 
    margin-top: 10px; 
    margin-bottom: 15px; 
} 
section h3.bg-section-subheading { 
    color: white; 
    font-size: 16px; 
    font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    text-transform: none; 
    font-style: italic; 
    font-weight: 400; 
} 

@media (min-width: 768px) { 
    section { 
    padding: 50px 0; 
    } 
} 
h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
    font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    text-transform: uppercase; 
    font-weight: 700; 
} 
.bg-darkest-gray { 
    background-color: #222222; 
    padding: 0; 
    } 

Fiddle