2017-11-19 30 views
2

私は本当に疑問に思っていることは可能ですが、まだ試してみる価値があります。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>

+0

このようなものを試すことができますか? https://css-tricks.com/image-under-text/ – Martin

+0

はい可能です – dean

+0

私は全く理解していませんが、ボタンの背景色が下にあるコンテナの背景なぜ、あなたは '背景色:ぼんやりした色 'を保つことができないのですか? – HJuls2

答えて

1

はい、それは(IEとエッジ、まっ​​たく驚きのコースの)すべてのブラウザ間でmix-blend-modeそれでもnot supportedで可能なです。

@import url('https://fonts.googleapis.com/css?family=Bowlby+One+SC'); 
 

 
.ghost-button { 
 
    font: 2em/1 'Bowlby One SC', Cursive; 
 
    letter-spacing: 1px; 
 
    outline: none !important; 
 
    transition: all .8s; 
 
    padding: .5em 1em; 
 
    cursor: pointer; 
 
    color: #fff; 
 
    background: transparent; 
 
    border: .125em solid #fff; 
 
    mix-blend-mode: screen; 
 
} 
 

 
.ghost-button:hover { 
 
    background: #fff; 
 
    color: #000; 
 
} 
 

 
.ghost-button:active { 
 
    box-shadow: inset 0 0 8px 0px #888; 
 
} 
 

 
#container { 
 
    background: url('http://www.cheremturismo.com.br/site/fotos/8176500051000770360.jpeg'); 
 
    background-size: cover; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 100vh; 
 
} 
 

 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
}
<div id="container"> 
 
    <button class="ghost-button">Hover Here</button> 
 
</div>

あなたが見ることができるように、このscreenモードを使用するときに黒を背景と混合されているので、秘密は、mix-blend-mode: screenを設定し、白から黒にcolorを変えています。

+0

ありがとう、偉大な答えですが、おそらくあなたの例を最小限に抑えることができますか? –

+0

これは 'background-color'でも' background-image'だけでも使えますか? –

2

以下の例を参照してくださいいいえ、それはCSSで可能ではありません!この効果を模倣するようにJSとcolorを設定しようとすることができます。

+0

イメージやキャンバスではまだ動作しません。それ? –

+0

いいえ、それはCSSでもJSでもうまくいきません... – Sergej

+0

そして、私は色が親の背景色を継承することができないと思いますか? –

0

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: none; 
 
    color: red; 
 
} 
 

 
.ghost-button:active { 
 
    box-shadow: inset 0 0 8px 0px #888888; 
 
}
<div id="container"> 
 
    <button class="ghost-button">Hover Here</button> 
 
</div>

ホバー色は、あなたがそれを更新することができます赤に設定されています。

+0

ホバーから白い色を取り除きたいのですが、そうではありませんか?ホバーのカラーテキストは背景の色が変わるので変更します。それで全部です。あなたはホバーの色を変更することができます – dean

+0

ボタンが画像やキャンバスにあることを意味する? – dean

+0

あなたは受け入れられた答えを見て、私が求めていたものを見ることができます –

関連する問題