색상이 CSS의 배경을 지울 수 있습니까?

Question

나는 정말로 내가 원하는 것이 무엇인지 의심 스럽지만 여전히 시도 할 만하다.

일반적으로 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>

Answer 1

네, 모든 브라우저에서 mix-blend-mode와 수하지만 여전히 not supported입니다 (IE에 코스와 에지의, 놀랄 전혀). 이 screen 모드를 사용할 때 검은 색이 배경과 혼합되어 있기 때문에

당신이 볼 수 있듯이

@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>

는, 비밀은, mix-blend-mode: screen을 설정하고 검은 색 흰색에서 color을 변화하고 있습니다.

Answer 2

없음 아래의 예를 참조하십시오, 그것은 CSS에서 불가능하다! 이 효과를 모방하기 위해 JS로 color을 설정하려고 할 수 있습니다.

Answer 3

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>

호버 색상은 당신이 그것을 업데이트 할 수 있습니다 빨간색으로 설정됩니다.