无法实现颜色超过图像效果

Question

我有一个带背景图像的div，我使用了box-shadow在图像上应用蓝色滤镜。但是，我似乎无法使透明度更高（颜色太透明）。以下是截图和代码。非常感谢任何帮助！

现在看起来如何：

我想要实现的目标：

HTML：

<div class ="additional-container">
  <a href="<?php the_permalink(); ?>" class="additional" style="background-image:url('<?=$url?>');">
    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/rollup.png" />
    <span>Equity Zone One Pager</span>
  </a>
</div>

CSS：

.pagecontent .cols .col.one .additional-container {
  width: 100%;
  height: auto;
}

.pagecontent .cols .col.one .additional-container a {
  text-decoration: none;
  color: white;
}

.pagecontent .cols .col.one .additional {
  padding: 15px;
  box-shadow: inset 0 0 350px rgba(86, 159, 223, .9);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  width: 45%;
  display: inline-block;
}

.pagecontent .cols .col.one .additional span {
  padding: 15px;
}

.pagecontent .cols .col.one .additional img {
  padding-top: 6px;
}

Answer 1

使用绝对位于图像上方的伪元素，并为该元素提供透明的蓝色背景。例如：

HTML：

<div class="additional-container">
  <img src="http://lorempixel.com/image_output/nature-q-c-987-222-3.jpg"  />
</div>

CSS：

.additional-container {
   position: relative;
}
.additional-container:after {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   background: rgba(66,161,224, 0.9);
 }

关于jsfiddle的示例：http://jsfiddle.net/s26397my/2/

Answer 2

您需要在spread-radius属性中设置box-shadow值。它是2个偏移和模糊半径之后的第4个值：

  

offset-x | offset-y | blur-radius |传播半径|颜色

     

box-shadow：2px 2px 2px 1px rgba（0,0,0,0.2）;

试试这个：

 box-shadow: inset 0 0 0 350px rgba(86, 159, 223, .9);

你可以在这里看到不同之处：

.additional {
  padding: 15px;
  box-shadow: inset 0 0 350px rgba(86, 159, 223, .9);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  width: 45%;
  height: 40px;
}
.additional.spread {
  box-shadow: inset 0 0 0 350px rgba(86, 159, 223, .9);
}

<div class="additional">No Spread</div>

<div class="additional spread">With Spread</div>

Box-Shadow @ MDN