私は本当に疑問に思っていることは可能ですが、まだ試してみる価値があります。CSSの背景を色で消去することは可能ですか?
通常はbackground-color: transparent; color: white;
のボタンを作成しようとしていますが、その上にカーソルを置くとこれらのプロパティが入れ替わるはずです。問題は、スワップするだけで白いボタンが表示されることです。あなたが包含している要素の背景色を知っていればそこから色を得ることができますが、ボタンが画像やキャンバス上にある場合、これは機能しません。
これは、これまでのところ、私はそれをやってきた方法です
html,
body {
height: 100%;
}
#container {
background-color: #38404D;
height: 100%;
}
.ghost-button {
background-color: transparent;
border: 1px solid #ffffff;
outline: none !important;
transition: all 0.8s;
margin: 10px 10px;
padding: 6px 7px;
cursor: pointer;
color: #ffffff;
}
.ghost-button:hover {
background-color: #ffffff;
color: #38404D;
}
.ghost-button:active {
box-shadow: inset 0 0 8px 0px #888888;
}
<div id="container">
<button class="ghost-button">Hover Here</button>
</div>
UPDATE
かなりの数の人が疑問に混乱しているようです。私は上に行ったことと全く同じことをする方法があるかどうかを尋ねていますが、画像やキャンバスの上に(ソリッドカラーの代わりに)行います。
html,
body {
height: 100%;
}
#container {
background-image: url("http://www.freegreatpicture.com/files/147/17878-hd-color-background-wallpaper.jpg");
height: 100%;
}
.ghost-button {
background-color: transparent;
border: 1px solid #ffffff;
outline: none !important;
transition: all 0.8s;
margin: 10px 10px;
padding: 6px 7px;
cursor: pointer;
color: #ffffff;
}
.ghost-button:hover {
background-color: #ffffff;
color: #38404D;
}
.ghost-button:active {
box-shadow: inset 0 0 8px 0px #888888;
}
<div id="container">
<button class="ghost-button">Hover Here</button>
</div>
このようなものを試すことができますか? https://css-tricks.com/image-under-text/ – Martin
はい可能です – dean
私は全く理解していませんが、ボタンの背景色が下にあるコンテナの背景なぜ、あなたは '背景色:ぼんやりした色 'を保つことができないのですか? – HJuls2