我在一個組件中有一個影像，我想在它上面覆寫一個 0.6 的白色背景。
import background from "../images/pageBG2.png"; //import an image for bg use
var collectionWindowStyle = {
div:{
backgroundImage: `url(${background})`,
backgroundPosition: 'center',
backgroundSize: 'cover',
background: 'rgba(255,255,255,0.5)',
color: "white",
margin: "5px",
padding: "5px",
}
,
h1:{
color: "grey"
},
}
所以我的想法是，如果我在我的影像之后使用“背景”，那會在上面覆寫純白色，但是 alpha 會使影像看起來有些褪色。我的反應應用程式中發生的所有事情是影像完全是白色的。我能做什么？
然后在組件本身中呼叫它
const Bookcollection = () => {
return(
<div style={collectionWindowStyle.div}>
...
嘗試使用谷歌搜索它，但我自己沒有找到任何東西。
uj5u.com熱心網友回復：
將組件的位置設定為相對位置并在其中放置一個 div。然后給那個子 div 一個絕對位置并插入 0。然后給同一個 div 一個白色透明背景。
uj5u.com熱心網友回復：
通過撰寫此內容，您將覆寫影像并將其替換為白色背景
backgroundImage: `url(${background})`,
backgroundPosition: 'center',
backgroundSize: 'cover',
background: 'rgba(255,255,255,0.5)',
您可以通過以下方式創建疊加層：
div:{
backgroundImage: `url(${background})`,
backgroundPosition: 'center',
backgroundSize: 'cover',
color: "white",
margin: "5px",
padding: "5px",
'&::before': {
content: "",
position: "absolute",
left: 0,
right: 0,
top: 0,
bottom: 0,
background: "rgba(255,255,255,.5)",
}
}
css 看起來是這樣的：
div:{
....
}
div:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(255,255,255,.5);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/369627.html
標籤：javascript css 反应