CSS가 이미지의 src에서 변경된 부분을 인식하고 온라인에서 찾은 해킹이 발생하지 않고 정확한 전환을 적용하는 것은 불가능합니다. 예를 들어 서로간에 여러 이미지를 배치하거나 조합을 사용하는 것 src와 백그라운드의?CSS 이미지 전환
이미지가 모든 웹 사이트의 주요 요소 (div, 이미지, 텍스트) 중 하나 인 것처럼 이러한 결함이있는 것 같습니다. 내 질문은 : 직접 지원되지 않는지, 그렇지 않다면, 왜?
CSS는 DOM을 변경할 수 없습니다. 따라서 src 특성을 편집 할 수 없습니다.
물론 자바 스크립트를 사용하거나 CSS에서 변경할 수있는 CSS 배경 (background-image)을 사용할 수 있습니다.
또는 HTML에 <img> 태그를 많이 사용하고 CSS를 사용하여이 태그를 이동할 수 있습니다.
나는 그것이 명확하지 않은 것, 미안하다. 예를 들어 JS를 통해 div의 LEFT 속성을 변경하면 CSS가이를 선택하고 해당 div의 CSS 스타일 시트에서 요청한 전환을 적용합니다. 동일한 JS 스크립트를 사용하여 이미지를 변경하면 (src 변경) CSS는 이미지를 선택하지 않고 CSS 스타일 시트에서 해당 이미지에 대해 정의한 전환 효과가 없습니다. 내 질문은 이것이 지원되지 않는 경우이며, 그렇지 않다면 내가 알지 못하는 이유는 무엇입니까? – Lodewijk
가능합니다. 요소를 특정 속성의 특정 값과 일치시키는 CSS 규칙을 만들 수 있습니다. 이것은 CSS 선택기의 매우 드물게 사용되는 기능이지만 CSS 2.1 이후로 지원되며 IE7을 포함한 모든 브라우저에서 작동합니다. 당신은 여기에 대한 자세한 내용을보실 수 있습니다 : http://www.w3.org/TR/CSS2/selector.html#attribute-selectors
예 :
img[src='one.png'] { ... }
img[src='two.png'] { ... }
라이브 데모 : 당신은 무엇을 http://jsfiddle.net/dJJqf/
이미지를 변경하기 만하면됩니다. 그래서 SRC 속성을 변경합니다. 변경 사항은 급작스러워서는 안되지만 대신 오래된 이미지에서 멋진 페이드를 표시하고 새 이미지를 페이드 인합니다. 그게 다야. 하지만 이제는 이것이 html/css만으로는 불가능하다는 것이 확인되었습니다. _Didnt는 src 당 css 셀렉터로 그 일을 할 수 있다는 것을 알고 있습니다. 감사합니다. 적어도 배웠습니다. – Lodewijk
를 시도? 하지만 CSS는 스타일 시트이며 이미지 src 속성 태그에 대한 지식이 없어야합니다.하지만 background-image : css 속성에 사용해야합니다. src 태그를 변경하려면 javadript –
으로 뭔가를 볼 필요가 있습니다. 일반적으로 그런 기법을 사용하지 않는 것이 좋지만 특정 값의'src' 속성을 사용하여 특정 CSS 규칙을'img' 태그에 적용 할 수 있습니다. 아래 내 대답을 참조하십시오. – keaukraine