为什么“掩码”类在我的 Bootstrap 5 项目中不起作用？
[英]Why isn't the 'mask' class working in my Bootstrap 5 project?
问题描述
The latest Bootstrap 5 is giving a tough time in adding class="mask" to my background image.
最新的 Bootstrap 5 很难将class="mask"添加到我的背景图像中。 It doesn't even work at all.它甚至根本不起作用。
<head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"> </head> <body> <div class="d-flex justify-content-center align-items-center bg-image"> <img src="https://images.unsplash.com/photo-1489987707025-afc232f7ea0f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" class="w-100" /> <div class="mask " style="background-color:rgba(0, 0, 0, 0.6) ;"> <div class=" justify-content-center align-items-center b-100 "> <hi class="text-white"> product details </hi> </div> </div> </div> </body>
2 个解决方案
解决方案1
1 2022-06-17 13:32:25
Mask is a part of Material Design for Bootstrap ( mdbootstrap ), so you need to include its CSS CDN too Mask 是 Material Design for Bootstrap ( mdbootstrap ) 的一部分，所以你也需要包含它的 CSS CDN
<link
href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css"
rel="stylesheet"
/>
<head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"> <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" /> </head> <body> <div class="d-flex justify-content-center align-items-center bg-image"> <img src="https://images.unsplash.com/photo-1489987707025-afc232f7ea0f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" class="w-100" /> <div class="mask" style="background-color:rgba(0, 0, 0, 0.6) ;"> <div class="d-flex justify-content-center align-items-center h-100"> <h1 class="text-white"> product details </h1> </div> </div> </div> </body>
解决方案2
0 2022-06-17 13:30:05
<link rel="stylesheet" href="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/docs-app/css/dist/mdb5/standard/core.min.css"> <div class="bg-image"> <img src="https://images.unsplash.com/photo-1489987707025-afc232f7ea0f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" class="w-100" alt="Louvre Museum" /> <div class="mask" style="background-color: rgba(0, 0, 0, 0.6)"> <div class="d-flex justify-content-center align-items-center h-100"> <p class="text-white mb-0">product details</p> </div> </div> </div>
Fixed the Bootstrap link, and added useful classes to rightly position the text div on the image.修复了 Bootstrap 链接，并添加了有用的类以在图像上正确定位文本 div。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
为什么我的带有 js 和 bootstrap 4 的过滤器不起作用？ - Why my filter with js and bootstrap 4 it isn´t working?
为什么我的 Bootstrap 手风琴不能正常工作？ - Why isn't my Bootstrap accordion working properly?
为什么我的Bootstrap模态窗口不能在Opera中运行？ - Why isn't my Bootstrap modal window working in Opera?
Babel为什么不从事我的React Native项目？ - Why isn't Babel working on my React Native project?
为什么 onClick 不能处理我的反应项目 - why onClick isn't working on my react project
我的引导程序模式不起作用 - My bootstrap modal isn't working
为什么Bootstrap的卷轴不起作用？ - Why isn't Bootstrap's scrollspy working?
为什么我的“npm测试”不能用于我的Angular2项目？ - Why isn't my “npm test” working with my Angular2 project?
为什么ng-class不起作用？ - Why isn't ng-class working?
为什么不是我的 - Why isn't my <a href working
相关标签