Thêm hình ảnh vào bên trái của văn bản qua css

83

Làm cách nào để thêm hình ảnh vào một số văn bản thông qua css?

Tôi đã có cái này:

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

và tôi muốn thêm hình ảnh 16x16 vào bên trái bằng cách sử dụng css. Điều này có thể thực hiện được không hay tôi chỉ nên thêm hình ảnh này theo cách thủ công như vậy:

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

Tôi không muốn phải thay đổi tất cả các vị trí theo cách thủ công, đó là lý do tại sao tôi muốn làm điều đó thông qua css.

cảm ơn!

css

— Chris Conway
nguồn

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 */
}

Chơi xung quanh với padding và có thể ký quỹ cho đến khi bạn đạt được kết quả mong muốn. Bạn cũng có thể chơi với vị trí của hình nền (* gật đầu với Tom Wright) với "background-position" hoặc thực hiện định nghĩa hoàn toàn về "background" ( liên kết tới w3 ).

— Jon Smock
nguồn

Có thể muốn chỉ định vị trí của hình ảnh. Nhưng nếu không, cuộc gọi tốt.

— Tom Wright

1

Bạn có thể tránh đặt thuộc tính hiển thị để chặn nếu bạn đảm bảo chiều cao dòng đủ lớn để vừa với hình ảnh theo chiều dọc, nếu không, bạn sẽ [có thể] thấy nó bị cắt nhỏ và muốn biến nó thành một phần tử khối.

— Zack The Human

Bạn có thể sử dụng tùy chọn được tối ưu hóa thay vì hai dòng đầu tiên: background: url ('where.jpg') no-repeat;

— Alexis Gamarra,

1

Điều này hoạt động khi trang được hiển thị trên màn hình, nhưng hầu hết các trình duyệt bỏ qua hình nền theo mặc định khi in, do đó bạn sẽ bị bỏ lại một khoảng trống nơi hình ảnh được cho là. Phải có một công việc xung quanh cho điều này!

— Sông Vivian

36

Phương pháp rất đơn giản:

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

Hoạt động trên tất cả các trình duyệt hiện đại và IE8 +.

Biên tập

Tuy nhiên, không sử dụng điều này trên các trang web lớn. Phần tử: before pseudo-element rất kinh khủng về mặt hiệu suất.

— tomasz86
nguồn

12

Hãy thử một cái gì đó như:

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

}

— Traingamer
nguồn

nhưng đừng quên no-repeat

— Traingamer

1

Việc thêm width:2em; background-size: contain;cũng có thể hữu ích để hạn chế kích thước của hình ảnh.

— Damian Green

8

Điều này hoạt động tốt

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

— Шууданч Зөгий
nguồn

1

bạn có thể giải thích thêm về điều này, tại sao nó hoạt động. tại sao mã của anh ấy không, v.v.

— Yaje

1

Nên có một cái gì đó trong url()?

— Darren Cook

@Darren Cook - Không biết bạn có đang bị mỉa mai hay không, dù sao thì bạn cũng phải đặt url cho hình ảnh của mình ở đó.

— Giovanni

3

@Giovanni Không phải mỉa mai! Tôi chỉ chỉnh sửa câu trả lời để làm rõ ràng hơn rằng nó không cố ý để trống.

— Darren Cook

2

Để thêm biểu tượng nền luôn vào trước văn bản khi không biết trước độ dài của văn bản.

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

— Toki
nguồn