我對菜單按鈕（位置：固定）顏色有疑問。我想讓按鈕文本顏色與背景相反，但找不到解決方案。body { margin: 0;}.content { height: 100px; background-color: #0b1433;}.content:nth-child(2n) { background-color: #fff;}.menu { position: fixed; font-weight: 600; font-size: 24px; right: 1vw; top: 40%; writing-mode: tb-rl; border-right: 6px double #000;}<div class="main"> <div class="menu"> <span>MENU</span> </div> <div class="content"></div> <div class="content"></div> <div class="content"></div> <div class="content"></div> <div class="content"></div> <div class="content"></div></div>
2 回答
哈士奇WWW
TA貢獻1799條經驗 獲得超6個贊
將您的樣式更改.menu為此。
.menu {
position: fixed;
font-weight: 600;
font-size: 24px;
right: 1vw;
top: 40%;
writing-mode: tb-rl;
border-right: 6px double #000;
mix-blend-mode: difference; /* This will change the color */
color: rgb(255, 255, 255); /* Needs to be white if you want black text */
}
最后兩個屬性將為您提供所需的效果。
它將把菜單的顏色更改為與其下方的背景顏色相反的顏色。
米脂
TA貢獻1836條經驗 獲得超3個贊
要根據背景顏色反轉文本的顏色，請在類中使用filter: invert(1);和。 例子：mix-blend-mode: difference;.menu
.menu {
position: fixed;
font-weight: 600;
font-size: 24px;
right: 1vw;
top: 40%;
writing-mode: tb-rl;
border-right: 6px double #000;
filter: invert(1);
mix-blend-mode: difference;
}
完整代碼：
<div class="main">
<div class="menu">
<span>MENU</span>
</div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
body {
margin: 0;
}
.content {
height: 100px;
background-color: #0b1433;
}
.content:nth-child(2n) {
background-color: #fff;
}
.menu {
position: fixed;
font-weight: 600;
font-size: 24px;
right: 1vw;
top: 40%;
writing-mode: tb-rl;
border-right: 6px double #000;
filter: invert(1);
mix-blend-mode: difference;
}
代碼筆： https: //codepen.io/marchmello/pen/ZEGNBWY
- 2 回答
- 0 關注
- 154 瀏覽
添加回答
舉報
0/150
提交
取消