css - 变暗背景但不是内部内容 - React / Ionic /CSS
问题描述
我需要使图像的背景变暗,而不是像下图那样将其内容变暗。图像是以编程方式绘制的,所以我不能在 css 中有它的 url。
下面应该是这样的:
现在它在寻找我的方式,我需要更白的角色:
我已经使用 ::before 或 ::after 查看了不同的答案,但鉴于我的图像是内联渲染的,它不起作用。在我的代码下面。
反应.TSX
{apartments.map(({ name, images, taskStatus }: any, index: number) => (
<Link key={index} to={`/apartments/${index}`}>
<div
className="apartmentImage"
style={{
backgroundImage: `url(${API_IMAGE}${images[0]})`,
}}
>
<div
className="center ion-margin-top"
style={{ width: "100%" }}
>
<h5 className="apartmentText">{name}</h5>
</div>
<div
className="center ion-margin-top"
style={{ width: "100%" }}
>
<h6 className="subApartmentText">MALAGA</h6>
</div>
</div>
</Link>
))}
CSS:
.apartmentImage {
width: 98%;
margin-left: 1%;
height: 24.7vh;
border-radius: 10px;
margin-top: 3%;
margin-bottom: -1%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: brightness(0.8);
}
.apartmentText {
color: white;
font-weight: bold;
}
知道该怎么做吗?
非常感谢!
解决方案
尝试以下操作:
{apartments.map(({ name, images, taskStatus }: any, index: number) => (
<Link key={index} to={`/apartments/${index}`}>
<div
className="apartmentImage"
style={{
backgroundImage: `url(${API_IMAGE}${images[0]})`,
}}
>
<div
className="center ion-margin-top"
style={{ width: "100%" }}
>
<h5 className="apartmentText">{name}</h5>
</div>
<div
className="center ion-margin-top"
style={{ width: "100%" }}
>
<h6 className="subApartmentText">MALAGA</h6>
<div className='color-overlay'/>
</div>
</div>
</Link>
))}
和 CSS:
.apartmentImage {
width: 98%;
margin-left: 1%;
height: 24.7vh;
border-radius: 10px;
margin-top: 3%;
margin-bottom: -1%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.apartmentText {
color: white;
font-weight: bold;
}
.apartmentText, .subApartmentText {
position: relative;
z-index: 1;
}
.color-overlay{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0,0,0,.3);
pointer-events: none;
}
我试过了,它对我有用,但是我在本地做了一些更改,所以我可以加载图像。请让我知道是否有问题,以便我仔细检查是否正确复制了所有代码。
推荐阅读
- javascript - 结合 google-maps-react 与 react-router
- typescript - 更改对象属性的位置后获取正确的类型信息
- react-native - 我在安装 react-native-push-notification 时遇到问题
- python - 在驱动程序 ='SQL+Server' 的 sql alchemy 中使用 fast_executemany = True 时出错
- python - 如何通过 Numpy 中的张量乘法在块乘法循环上实现矢量化?
- javascript - 反应JS | 映射嵌套对象
- javascript - 显示来自 RSS 源的图像
- angular - 通用类型数组未显示属性
- android - 我想通过其高级 api 即 PJSUA2 使用 PJSIP 堆栈开发一个 android VOIP 应用程序
- linux - 我如何查看 linux 上的内存使用情况?(过去 30 天)