Question

尝试将图像色调添加到我的轮播图像（BS4）中，我最初的理解是使用

.tinted-image img {
  background: 
    /* top, transparent red */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
}

codepen link - https://codepen.io/nightcoder21/pen/RyeYoz

这个剂量似乎有效，有没有人知道这样做的简单方法？（我试图保持我的代码尽可能简单和杂乱）

提前谢谢

Answer 1

将您的CSS改为此

.tinted-image:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
     rgba(255, 0, 0, 0.45), 
     rgba(255, 0, 0, 0.45)
  );
}

您可以在此处查看：https://codepen.io/anon/pen/rvqZvK

通过使用：在选择器之前，您可以为不同颜色的图像着色^^

我的boostrap 4旋转木马图像不能着色

1 个答案: