Bootstrap 轮播标题的 CSS 混合模式

Posted 2023-03-10

【中文标题】Bootstrap 轮播标题的 CSS 混合模式

【英文标题】：CSS blend mode for Bootstrap carousel caption

【发布时间】：2015-04-09 20:09:39

【问题描述】：

我正在使用 bootstrap 中的轮播组件，并且还想使用 CSS 混合模式 background-blend-mode: multiply; 作为标题。

很遗憾，混合模式不起作用。

代码如下：

<div class="carousel-inner" role="listbox">
    <div class="item">
        <div class="carousel-caption">
            CAPTION CONTENT
        </div>
        <img src="imgage.png" class="img-responsive" />
     </div>
</div>

CSS 如下：

.carousel-caption 
    background-color: rgba(0, 119, 137, 0.7); 
    background-blend-mode: multiply;

这是错误的方式吗？

【参考方案1】：

如果你想将一个元素混合到另一个元素上，你应该使用的属性是 mix-blend-mode。

它与 background-blend-mode 具有相同的语法，但这个仅适用于元素内背景（正如 M.Doye 所说）

【参考方案2】：

您需要将background-image 属性分配给您分配background-blend-mode 的同一选择器。所以这可能不适用于您的情况。

From the Docs

background-blend-mode CSS 属性描述了元素的 背景图像应该相互融合并且元素的 背景颜色。

语法示例：

.blended 
  background-image: url(face.jpg);
  background-color: red;
  background-blend-mode: multiply;

---

除了

multiply

，您还可以使用：screen、overlay、darken、lighten、color-dodge、color-burn、hard-light、soft-light、@ 987654335@、exclusion、hue、saturation、color 和 luminosity。还有normal

Source

【讨论】：

好的，谢谢。不幸的是，这种方式不是引导滑块的工作方式:-(

【参考方案3】：

为了让您的代码正常工作，您需要为元素添加背景图片。所以你的代码应该是这样的：

.carousel-caption 
   background-image: url('image.png');
   background-color: rgba(0, 119, 137, 0.7); 
   background-blend-mode: multiply;

您可以查看一篇很棒的文章here，它对混合模式属性进行了进一步的解释。