CSS에서 이미지를 설정하는 가능한 방법 모음
CSS2 의 :after가상 요소 또는 새로운 구문 ::after에서 CSS3 함께 content:속성 :
첫 번째 W3C 권장 사항 : 계단식 스타일 시트, 수준 2 CSS2 사양 1998 년 5 월 12 일
최신 W3C 권장 사항 : 선택기 수준 3 W3C 권장 사항 2011 년 9 월 29 일
이 메소드 는 요소의 문서 트리 컨텐츠 바로 뒤에 컨텐츠를 추가 합니다.
참고 : 일부 브라우저는 실험적으로 렌더링 content직접 이상의 속성을 일부 라도 최신 W3C 권고 정의하는 무시 요소 선택기 :
적용 대상 :before및 :after의사 요소
CSS2 구문 (앞으로 호환 가능) :
.myClass:after {
content: url("somepicture.jpg");
}
CSS3 선택기 :
.myClass::after {
content: url("somepicture.jpg");
}
기본 렌더링 : 원본 크기 (명확한 크기 선언에 의존하지 않음)
이 사양에서는 대체 된 요소 (예 : HTML의 IMG)와 : before 및 : after의 상호 작용을 완전히 정의하지 않습니다. 이것은 향후 사양에서 더 자세히 정의 될 것입니다.
그러나이 글을 쓰는 시점에도 <IMG>태그가 있는 동작 은 아직 정의되지 않았으며 해킹 및 비표준 호환 방식 으로 사용할 수 있지만와 함께 사용 <img>하지 않는 것이 좋습니다 !
훌륭한 후보 방법, 결론 참조 ...
CSS1 의
background-image:속성 :
첫 번째 W3C 권장 사항 : 계단식 스타일 시트, 수준 1 1996 년 12 월 17 일
이 속성은 요소의 배경 이미지를 설정합니다. 배경 이미지를 설정할 때 이미지를 사용할 수 없을 때 사용할 배경색도 설정해야합니다. 사용 가능한 이미지가 있으면 배경색 위에 겹쳐집니다.
이 속성은 CSS의 시작부터 시작되었지만 여전히 언급 할 가치가 있습니다.
기본 렌더링 : 원본 크기 (확대 할 수없고 배치 만 가능)
그러나 ,
CSS3 의 background-size:속성은 여러 스케일링 옵션을 허용하여 향상되었습니다.
최신 W3C 상태 : 후보 추천 CSS 배경 및 경계선 모듈 수준 3 2014 년 9 월 9 일
[length> | <percentage> | auto ]{1,2} | cover | contain
그러나이 속성을 사용하더라도 컨테이너 크기에 따라 다릅니다.
여전히 좋은 후보 방법은 결론을 참조하십시오 ...
CSS2 의 list-style:속성과 함께display: list-item :
첫 번째 W3C 권장 사항 : CSS (Cascading Style Sheets) 수준 2 CSS2 사양 1998 년 5 월 12 일
list-style-image: 속성은 목록 항목 마커 (글 머리 기호)로 사용될 이미지를 설정합니다.
목록 속성은 목록의 기본 시각적 형식을 설명합니다. 스타일 목록에서 마커 유형 ( image , glyph 또는 number) 을 지정할 수 있습니다.
display: list-item—이 값은 요소 (예 : <li>HTML)가 기본 블록 상자와 마커 상자를 생성하게합니다.
.myClass {
display: list-item;
list-style-position: inside;
list-style-image: url("someimage.jpg");
}
속기 CSS : ( <list-style-type> <list-style-position> <list-style-image>)
.myClass {
display: list-item;
list-style: square inside url("someimage.jpg");
}
기본 렌더링 : 원본 크기 (명확한 크기 선언에 의존하지 않음)
제한 사항 :
상속은 '목록 스타일'값을 OL 및 UL 요소에서 LI 요소로 전송합니다. 목록 스타일 정보를 지정하는 것이 좋습니다.
작성자 는 목록 마커에 대해 고유 한 스타일 (색상, 글꼴, 정렬 등)을 지정하거나 위치를 조정할 수 없습니다.
이 방법은 <img>요소 유형간에 변환을 수행 할 수 없으므로 태그에 적합 하지 않습니다. 여기에는 제한된 비준수 핵이 있습니다. 하지 않으며 Chrome에서 작동하지 않는 되지 않는 이 있습니다.
좋은 후보 방법, 결론 참조 ...
CSS3 의 border-image:속성 추천 :
최신 W3C 상태 : 후보 추천 CSS 배경 및 경계선 모듈 수준 3 2014 년 9 월 9 일
다소 독특한 방식으로 크기를 지정하고 (이 경우에는 정의되지 않음) 지금까지 대체 경계 속성 (예 :)에 의존 하는 백그라운드 유형 방법 : border: solid
스크롤 메커니즘이 발생하지 않더라도 조상이나 뷰포트에 의해 아웃 세트 이미지가 여전히 잘릴 수 있습니다.
이 예는 이미지가 오른쪽 아래 모서리 장식 으로 만 구성 되는 것을 보여줍니다 .
.myClass {
border: solid;
border-width: 0 480px 320px 0;
border-image: url("http://i.imgur.com/uKnMvyp.jpg") 0 100% 100% 0;
}
적용 대상 : 내부 테이블 요소를 제외한 모든 요소 border-collapse: collapse
여전히 의 태그를 변경할 수 는 없지만 ( 여기서는 핵이 있습니다 ) 대신 장식 할 수 있습니다.<img>src
.myClass {
border: solid;
border-width: 0 96px 96px 0;
border-image: url("http://upload.wikimedia.org/wikipedia/commons/9/95/Christmas_bell_icon_1.png")
0 100% 100% 0;
}
<img width="300" height="120"
src="http://fc03.deviantart.net/fs71/f/2012/253/b/0/merry_christmas_card_by_designworldwide-d5e9746.jpg"
class="myClass"
표준이 전파 된 후에 고려해야 할 좋은 후보 방법.
CSS3 의 element()표기 작업 초안 은 언급 할 가치가 있습니다.
참고 :이 element()함수 는 실제 내용과 구조가 아니라 참조 된 요소 의 모양 만 재현합니다 .
<div id="img1"></div>
<img id="pic1" src="http://i.imgur.com/uKnMvyp.jpg" class="hide" alt="wolf">
<img id="pic2" src="http://i.imgur.com/TOUfCfL.jpg" class="hide" alt="cat">
우리는 사용합니다 렌더링 된 내용 두 가지 중 하나의 숨겨진 이미지를 이미지 변경 배경 에서 #img1에 기초 ID 선택기 CSS를 통해를 :
#img1 {
width: 480px;
height: 320px;
background: -moz-element(#pic1) no-repeat;
background-size: 100% 100%;
}
.hide {display: none}
참고 : 그것은 실험 적이고 -mozFirefox 의 접두사 에서만 작동하며 over background또는 background-imageproperties 만 지정되며 크기도 지정해야합니다.
결론
- 의미 적 내용이나 구조적 정보는 HTML로 전달됩니다.
- 스타일링 및 프리젠 테이션 정보는 CSS에 적용됩니다.
- SEO 목적을 위해 숨기지 마십시오 CSS에서 의미있는 이미지를 .
- 배경 그래픽은 일반적으로 인쇄 할 때 비활성화됩니다.
- 사용자 정의 태그 는 CSS에서 사용하고 스타일을 지정할 수 있지만 Internet Explorer의 기본 버전은 Javascript 또는 CSS 지침 없이 HTML5 태그를 스타일링 하지 않습니다 ( IE는 shiv 사용) .
- SPA (단일 페이지 응용 프로그램)는 설계 상 일반적으로 배경에 이미지를 통합합니다.
이미지 표시에 적합한 HTML 태그를 살펴 보겠습니다.
그만큼 <li>요소 [HTML4.01 +]
list-style-image와의 완벽한 유스 케이스display: list-item 메소드 .
이 <li>요소는 비어있을 수 있으며 흐름 내용을 허용하며 </li>끝 태그 를 생략 할 수도 있습니다.
.bulletPics > li {display: list-item}
#img1 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/4/4d/Nuvola_erotic.png")}
#img2 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/7/74/Globe_icon_2014-06-26_22-09.png")}
#img3 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/c/c4/Kiwi_fruit.jpg")}
<ul class="bulletPics">
<li id="img1">movie</li>
<li id="img2">earth</li>
<li id="img3">kiwi</li>
</ul>
제한 사항 : 스타일 지정이 어렵 width:거나 float:도움이 될 수 있음
그림 요소는 선택적으로 캡션이있는 일부 흐름 내용을 나타내며 (완전한 문장처럼) 자체 포함되며 일반적으로 문서의 기본 흐름에서 단일 단위로 참조됩니다.
요소는 내용없이 유효하지만을 포함하는 것이 좋습니다 <figcaption>.
따라서 요소를 사용하여 일러스트레이션, 다이어그램, 사진 , 코드 목록 등에 주석을 달 수 있습니다 .
기본 렌더링 : 요소가 왼쪽과 오른쪽 패딩으로 오른쪽 정렬됩니다!
이미지를 포함하기 위해 작성자는 OBJECT 요소 또는 IMG 요소를 사용할 수 있습니다.
이 data속성은 필수이며 유효한 MIME 유형 을 값으로 가질 수 있습니다 !
<object data="data:x-image/x,"></object>
참고 : <object>CSS 에서 태그를 사용하는 트릭 은 사용자 정의 유효한 MimeType x-image/x과 데이터 없음 을 설정하는 것입니다 (값은 필수 쉼표 뒤에 데이터가 없음 ,)
기본 렌더링 : 300 x 150 픽셀이지만 크기는 HTML 또는 CSS로 지정할 수 있습니다.
SVG 필요로 할 수있는 브라우저를 하고있다 <image>래스터 이미지 요소를
width에 속성의 기본값 (300) , 그리고 height에 속성의 기본값은 150 .
<input>와 요소type="image"
한계 :
... 요소가 버튼임을 나타 내기 위해 요소가 버튼 모양으로 나타납니다.
텍스트가 없을 때 어떤 Chrome이 따르고 4x4px 빈 사각형을 렌더링
부분 솔루션, 설정 value=" ":
<input type="image" id="img1" value=" ">
또한 현재 작업중인 초안 인 HTML5.1 의 다음 <picture>요소도 살펴보십시오 .