'값'텍스트의 '예쁜'스타일 버전이 포함 된 배경 이미지가있는 양식 제출 버튼이 있습니다. 이미지가 표시되지 버튼 텍스트는 분명히 없다 (접근성 테스트를 위해) 해제와 함께, 그러나배경 이미지가있는 액세스 가능한 제출 버튼
text-indent: -9000px;
font-size: 0;
:
나는 사용하여 HTML 값 텍스트를 숨기고 있었다.
위의 값을 제거하면 값 텍스트가 다시 표시되지만 이미지의 맨 위에 오버레이됩니다.
값 텍스트 상단에 어떻게 배경 이미지를 넣을 수 있습니까?
첫 번째 추측은 <button><span></span></button>의 일부 조합입니까?
<input type="submit" value="" />
을 당신은 당신의 CSS에서 text-indent을 제거 할 수 있습니다
어떤 버튼 내부에 img 태그를 사용하고, 제공에 대한 alt 속성이 :
HTML :
<button class="button">
<img src="http://www.google.nl/logos/2010/stnicday10-infstant.jpg" alt="google"/>
</button>
CSS :
.button {
background: transparent;
border: 1px solid Black;
}
P. 대체 텍스트 대신 이미지를 보려면 google URL에서 "f"를 제거하십시오. 'infstant'는 'instant'가됩니다. – Bazzz
설정 버튼의 값은 비어 있습니다.
분명히 텍스트가 표시되지 않지만 CSS 배경을 비활성화하면 버튼이 계속 표시됩니다.
질문을 읽어보십시오. 가치 텍스트를 보관하고 싶습니다. –
텍스트가있는 배경 이미지와 HTML 및 CSS 만있는 버튼 값을 가질 수 없습니다. 값을 가지지 않거나 배경을 변경하여 텍스트를 포함하지 않고 제출 버튼의 텍스트 스타일을 지정하십시오. – mingos
은 당신이 뭔가를 할 수 있습니다 : <button>Your BTN Text<span class="img"> </span></button>
및 CSS에서을 : 그래서
button { position: relative;}
button span {
position: absolute;
text-indent: -9000px;
top:0;
left: 0;
right:0;
bottom:0;
background: url(yourimage.whatever);
}
우리는 텍스트가 여전히 절대 요소에서 볼 수있는 이미지를 해제합니다.
이 value="" (빈)로 확인 :
<input type='submit' name="csubmit" value="" />
버튼을 입력하고 버튼을 기반으로 검증은 빈 공간으로 휴가 값을 클릭 :
<input type-"submit" name="csubmit1" value=" " />
<input type-"submit" name="csubmit2" value=" " />
<input type-"submit" name="csubmit3" value=" " />
없는 이미지의 사용 사례는 무엇입니까? 스크린 리더? 이 경우 텍스트 들여 쓰기 된 텍스트는 여전히 읽혀집니다. – Erik
흠. 접근성에 대해 걱정한다면, 이것이 처음부터 갈 수있는 올바른 경로라고 확신합니까? 설명 텍스트를 버튼 외부에 배치하는 것이 더 쉬울까요? –
@Pekka, 미안한 질문은 완전히 명확하지 않았습니다. 설명적인 텍스트가 아니며, 그렇지 않으면 값이 표시 될 텍스트입니다. 질문을 반영하도록 변경했습니다. –