无法为我的 boostrap 4 轮播图像着色

拉维21

尝试向我的轮播图像 (BS4) 添加图像色调,我最初的理解是使用

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

codepen 链接 - https://codepen.io/nightcoder21/pen/RyeYoz

这似乎有效,有没有人知道任何简单的方法来做到这一点?(我试图让我的代码尽可能简单和整洁)

先感谢您

初级程序员

把你的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

通过使用 :before 选择器,您可以为图像着色不同颜色 ^^

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

FullCalendar无法加载到Boostrap 4选项卡中

来自分类Dev

CSS 和 Boostrap:在 div 中拟合图像或轮播

来自分类Dev

网格系统 Boostrap 4 - 内联

来自分类Dev

如何在 Boostrap 4 的图像卡上放置响应式对象适合封面?

来自分类Dev

如何在仍然响应的 boostrap 4 导航栏中制作重叠的徽标图像?

来自分类Dev

动态创建的boostrap 4卡显示为一列,而不是常规布局(行)

来自分类Dev

Rails 4 Heroku部署错误:预编译资产失败-无法导入/查找boostrap文件

来自分类Dev

Raspberry Pi 4 Ubuntu 19.10 无法在 boostrap 中启用 cgroup 内存

来自分类Dev

Boostrap 4:Modal 不会显示在我的 React 应用程序中

来自分类Dev

Boostrap轮播不调整文本大小

来自分类Dev

Boostrap,divs与图像彼此下

来自分类Dev

Bootstrap4:多图像轮播

来自分类Dev

CSS-Rails 4-Boostrap-

来自分类Dev

Boostrap 4 中的可扩展列表

来自分类Dev

Boostrap 4 中的 Flex 佈局

来自分类Dev

Boostrap 4 Toast在调用后不显示

来自分类Dev

我如何在 bs4 中的轮播中集中并缩小两个图像之间的间隙?

来自分类Dev

在Matlab中为图像着色

来自分类Dev

我的图像轮播无法正常工作?(HTML和CSS)

来自分类Dev

我的CSS无法与boostrap 3一起使用

来自分类Dev

我的CSS无法与boostrap 3一起使用

来自分类Dev

为Mac安装虚幻devkit 4:无法识别图像

来自分类Dev

Boostrap Mobile查看图像调整大小

来自分类Dev

html boostrap navbrand 图像标志问题

来自分类Dev

引导图像轮播无法以角度显示

来自分类Dev

轮播/滑块图像无法正确调整大小

来自分类Dev

图像轮播无法升级(HTML / JavaScript)

来自分类Dev

如何使我的图像轮播循环而不是返回

来自分类Dev

光滑轮播上的Twitter Boostrap工具提示

Related 相关文章

热门标签

归档