在带有图案的画布上制作一个较暗的盒子

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

您可以添加黑色方块并设置opacity :) 编辑： 例如：

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

   <div><img/></div>

如您所见，我将颜色设置为黑色。不透明度会改变颜色。 当您为背景img添加此项时，您将看到效果：）

Answer 2

您可以通过不使用内部框的图案来实现这一点，而是使用rgba颜色值，允许图案通过透明度显示。例如。 background: rgba(0,0,0,0.2);

https://jsfiddle.net/xudg5d93/

演示

为了进一步控制透明度如何影响事物，您可能还需要查看CSS filter属性：https://css-tricks.com/almanac/properties/f/filter/

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>