CSS를 사용하여 입력 버튼 이미지와 해당 호버 효과의 스타일을 어떻게 지정할 수 있습니까?

CSS를 사용하여 입력 버튼 이미지 스타일 지정

소개

HTML을 사용하여 이미지로 입력 버튼을 만드는 것은 간단하지만 CSS를 사용하여 모양을 변경하는 것은 도전해 보세요. 이 문서에서는 CSS 솔루션을 사용하여 입력 버튼에 이미지를 추가하고 마우스 오버 시 모양을 수정하는 문제를 다룹니다.

문제

일부 사용자는 CSS를 사용하여 입력 버튼의 스타일을 다음과 같이 지정하려고 합니다. 이미지하지만 어려움에 직면합니다. 사용자 정의 CSS 클래스를 정의하려고 시도하지만 원하는 호버 효과를 얻을 수 없습니다.

해결책

CSS를 사용하여 이미지로 입력 버튼의 스타일을 지정하려면 "유형"을 사용해야 합니다. 기인하다." "type='image'" 대신 유형을 "type='submit'"으로 설정하세요. 이렇게 하면 CSS를 사용하여 버튼 모양을 제어할 수 있습니다.

<input type="submit">

버튼이 설정되면 "제출" 버튼으로 "myButton" 클래스에 CSS 스타일을 적용하여 이미지를 배경으로 추가하는 등의 모양을 정의할 수 있습니다.

.myButton {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

이 접근 방식을 사용하면 ":hover" 의사 클래스를 사용하여 마우스 오버 시 버튼의 모양을 수정할 수 있습니다.

.myButton:hover {
    background-color: #ff0000;
}

이 CSS 솔루션을 사용하면 이미지가 포함된 입력 버튼에 대한 스타일 및 마우스 오버 효과를 허용하여 사용자가 직면한 문제를 해결할 수 있습니다. . 그러나 Safari는 이러한 특정 스타일 지정 방법을 지원하지 않을 수 있다는 점에 유의하는 것이 중요합니다. 이 경우 이미지와 onclick 기능을 사용하여 양식을 제출해야 할 수도 있습니다.

위 내용은 CSS를 사용하여 입력 버튼 이미지와 해당 호버 효과의 스타일을 어떻게 지정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!