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

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

---

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

나는 이것을 얻었다 :

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

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

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

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

감사!

---

.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 링크 ).

---

아주 간단한 방법 :

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

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

편집하다

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

---

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

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

}

---

이것은 잘 작동합니다

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

참고URL : https://stackoverflow.com/questions/735394/add-image-to-left-of-text-via-css