做一個較深的盒子與模式

Question

畫布我在CSS定義的規則爲has-pattern：

.has-pattern { 
    background-image: url('../images/patterns/pattern-1.png'); 
    background-repeat: repeat; 
    background-position: left top; 
} 

結果，其中應用has-pattern段（<section class="team section has-pattern">）具有以下背景：

現在，我想在此部分插入一個較小的盒子，並使用較深的背景色。我的問題是如何不讓黑暗的盒子打破現有的模式。

我嘗試添加了跟隨我的CSS：

.team .box-inner { 
    padding: 60px; 
    background-color: #3FA07A; 
    background-image: url('../images/patterns/pattern-1.png'); 
    background-repeat: repeat; 
} 

的問題是兩個層次的模式不匹配：

有沒有人有辦法解決嗎？

Answer 1

你可以通過不使用模式的內框，而是通過使用rgba顏色值來代替，允許模式通過透明顯示。例如。在https://jsfiddle.net/xudg5d93/

background: rgba(0,0,0,0.2);

演示有關透明度如何影響的事情futher控制，你可能想看看CSS屬性filter以及：https://css-tricks.com/almanac/properties/f/filter/

Answer 2

你可以只是黑色加廣場，並設置opacity :) 編輯： 例如：

div{ 
 
    background-color: #000; 
 
    width:50px; 
 
    height:50px; 
 
    opacity: 0.5; 
 
}

<div><img/></div>

正如你看到的，我設置顏色爲黑色。不透明度會改變顏色。 當你添加這個爲你的背景img，你會看到效果:)

Answer 3

使用background-color: rgba()。

指定所需的rgb顏色值並調整不透明度[0.3在本例中。根據需要實際範圍0（透明）到1（不透明）]以獲得期望的效果。

.has-pattern { 
 
    background-image: url('http://i.stack.imgur.com/vdlyZm.png'); 
 
    background-repeat: repeat; 
 
    background-position: left top; 
 
    min-height: 200px; 
 
} 
 
.header { 
 
    text-align: center; 
 
    color: white; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    margin: 0px 10%; 
 
    background-repeat: repeat; 
 
    background-color: rgba(54, 125, 94, 0.3); 
 
}

<section class="has-pattern"> 
 
    <div class="header"> 
 
    Heading here ! 
 
    </div> 
 
</section>