CSS를 통해 텍스트 왼쪽에 이미지 추가

85

CSS를 통해 일부 텍스트에 이미지를 추가하려면 어떻게해야합니까?

나는 이것을 얻었다 :

<span class="create">Create something</span>

css를 사용하여 그 왼쪽에 16x16 이미지를 추가하고 싶습니다. 이것이 가능합니까 아니면 수동 으로이 이미지를 다음과 같이 추가해야합니까?

<span class="create"><img src="somewhere"/>Create something</span>

차라리 모든 장소를 수동으로 변경할 필요가 없기 때문에 CSS를 통해 수행하고 싶었습니다.

감사!

css

— 크리스 콘웨이
소스

126

.create
{
background-image: url('somewhere.jpg');
background-repeat: no-repeat;
padding-left: 30px;  /* width of the image plus a little extra padding */
display: block;  /* may not need this, but I've found I do */
}

원하는 결과를 얻을 때까지 패딩과 여백을 사용해보십시오. 또한 "background-position"을 사용하여 배경 이미지의 위치 (* nod to Tom Wright)를 가지고 놀거나 "background"를 완전히 정의 할 수도 있습니다 (w3 링크 ).

— 존 작업복
소스

이미지의 위치를 지정하고 싶을 수 있습니다. 그러나 그렇지 않으면 좋은 전화입니다.

— Tom Wright

1

line-height가 이미지를 수직으로 맞출만큼 충분히 큰지 확인하면 display 속성을 block으로 설정하는 것을 피할 수 있습니다. 그렇지 않으면 잘려서 블록 요소로 만들고 싶을 수도 있습니다.

— Zack The Human

두 개의 첫 번째 줄 대신 최적화 된 옵션을 사용할 수 있습니다. background : url ( 'somewhere.jpg') no-repeat;

— Alexis Gamarra 2014

1

이것은 페이지가 화면에 표시 될 때 작동하지만 대부분의 브라우저는 인쇄 할 때 기본적으로 배경 이미지를 생략하므로 이미지가 있어야하는 곳에 빈 공간이 남게됩니다. 이에 대한 해결 방법이 있어야합니다!

— Vivian River

36

아주 간단한 방법 :

.create:before {
content: url(image.png);
}

모든 최신 브라우저 및 IE8 +에서 작동합니다.

편집하다

그래도 대규모 사이트에서는 사용하지 마십시오. : before 의사 요소는 성능 측면에서 끔찍합니다.

— tomasz86
소스

12

다음과 같이 시도하십시오.

.create
 { 
  margin: 0px;
  padding-left: 20px;
  background-image: url('yourpic.gif');
    background-repeat: no-repeat;

}

— Traingamer
소스

하지만 반복

— Traingamer 2009

1

width:2em; background-size: contain;이미지의 크기를 제한하기 위해 추가 하는 것도 유용 할 수 있습니다.

— Damian Green

8

이것은 잘 작동합니다

.create:before{
    content: "";
    display: block;
    background: url('somewhere.jpg') no-repeat;
    width: 25px;
    height: 25px;
    float: left;
}

— Шууданч Зөгий
소스

1

하지만 이것이 작동하는 이유를 자세히 설명 할 수 있습니다. 그의 코드 등을하지 않은 이유

— Yaje

1

에 뭔가 있어야합니까 url()?

— Darren Cook

@Darren Cook-당신이 냉소적인지 아닌지 모르겠습니다. 어쨌든 이미지에 URL을 넣어야합니다.

— Giovanni

3

@Giovanni 비꼬 지 마세요! 고의로 공백으로 두지 않았 음을 명확히하기 위해 답변을 편집했습니다.

— Darren Cook

3

텍스트 길이를 미리 알 수없는 경우 항상 텍스트 앞에 배경 아이콘을 추가합니다.

.create:before{
content: "";
display: inline-block;
background: #ccc url(arrow.png) no-repeat;
width: 10px;background-size: contain;
height: 10px;
}

— 따오기
소스