안녕하세요!
오늘은 audio tag를 넣어서 웹페이지를 만드는 도중
background-color를 투명하게 만들려고 해도 되지 않아 구글링을 해서 알게 된 사실을
알려드릴려고 합니다.
결론은 불가능 하다입니다.
그럼 저희는 당연히 이런걸 바꾸기 위해서 javascript가 있는 것이고
어떻게 하면 바꿀 수 있을지 볼까요?
일단 간단히 codesandbox에서 해보도록 하겠습니다.
일단 이렇게 style에 background color로 transparent를 줘도 투명해지지 않습니다.
인터넷에서 찾아보니,
audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-panel {
background-color: transparent;
}
이 코드를 사용하면 된다고 하더라구요.
하지만 위코드는 transparent는 먹히질 않았습니다.
당연히 red나 blue로 바꿀때는 코드가 작동했는데요. 그럼 투명하게 어떻게 만들까요?
저 상태에서는 당연히 불가능 합니다.
우리는 button을 따로 만들어서 그것을 투명하게 만들어야 할 뿐입니다.
예시를 들어볼께요!
controls를 지우고 play라는 버튼을 만들었습니다.
이제 이 play버튼이 controls나 다름이 없습니다!
이제 연결되어 있는 index.js로 가볼까요
이런 식으로 js를 통해 직접 play버튼을 만들어 주는 것입니다.
이제 이 버튼의 배경을 투명하게 만들면 되는 것입니다!
border와 배경을 없애 주었습니다.
정말 조잡하지만 Play 버튼이 생겼습니다.
이런 식으로 다른 pause 버튼 같은 것들을 만들면 됩니다!
요즘 저를 소개하는 페이지를 만들어보고 있는데요
거기서도 위에 play 버튼을 넣어서 배경음악을 넣어보았어요!
아주 유용한 기능입니다!