투명한 HTML 버튼을 만드는 방법은?

투명한 HTML 버튼을 만드는 방법은?

드림위버로 웹사이트를 만들고 있는데 포토샵으로 배경을 만들까 생각했습니다.코드 편집만으로 버튼 이름을 쉽게 바꿀 수 있는 경우에는 코드를 참조할 수 있기 때문에 그렇게 하기로 했습니다.포토샵을 이용하여 버튼을 구성한다면 해당 버튼이나 어떤 요소에서도 텍스트를 쉽게 편집할 수 없을 것입니다.

그래서 제 질문은 간단합니다. 어떻게 하면 버튼의 값이 계속 보이도록 투명한 인라인 스타일을 가진 버튼을 만들 수 있을까요?

.button {     
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;        
}

클릭한 후에도 테두리 음영이 남아 있습니다.

클릭할 때 윤곽선을 제거하려면 다음을 추가합니다.outline:none

JS Fiddle 예제

button {
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
}

button {
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
}

<button>button</button>

솔루션은 실제로 꽤 쉽습니다.

<button style="border:1px solid black; background-color: transparent;">Test</button>

인라인 스타일입니다.테두리는 1px, 실선, 색상은 검은색으로 정의하고 있습니다.그런 다음 배경색이 투명으로 설정됩니다.

---

갱신하다

당신의 실제 질문은 국경을 클릭한 후 어떻게 막을 것인가 하는 것 같습니다.이는 CSS 의사 선택기로 해결할 수 있습니다.:active.

button {
    border: none;
    background-color: transparent;
    outline: none;
}
button:focus {
    border: none;
}

JS Fiddle 데모

div를 만들고 이미지(배경이 투명한 png)를 div의 배경으로 사용하면 해당 div 내의 텍스트를 적용하여 버튼 위를 맴돌 수 있습니다.이와 같은 것:

<div class="button" onclick="yourbuttonclickfunction();" >
Your Button Label Here
</div>

CSS:

.button {
height:20px;
width:40px;
background: url("yourimage.png");
}

<div class="button_style">
This is your button value
</div>

.button_style{   
background-color: Transparent;
border: none;             /* Your can add different style/properties of button Here*/
cursor:pointer;    
}

배경 이미지를 none(없음)으로 설정하면 다음 작업도 가능합니다.

button {
    background-image: none;
}

**아이콘 상단 버튼을 이렇게 추가합니다*

#copy_btn{
	align-items: center;
	position: absolute;
	width: 30px;
  height: 30px;
     background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}
.icon_copy{
	position: absolute;
	padding: 0px;
	top:0;
	left: 0;
width: 25px;
  height: 35px;
  
}

<button id="copy_btn">

                        <img class="icon_copy" src="./assest/copy.svg" alt="Copy Text">
</button>

언급URL : https://stackoverflow.com/questions/22672368/how-to-make-a-transparent-html-button