Ảnh nền trong <img> phần tử

Question

Ai đó có thể giúp tôi tìm ra sự cố của mình không? Tôi có một hình ảnh <img /> và sẽ cung cấp cho anh ấy hình nền trong một thẻ <a>.

Dưới đây là ví dụ của tôi:

<img border="0" style="display:block; width:20px; height:20px; background-color:red; padding:9px; background:url(\'./images/system/button/close/close.png)\' no-repeat" /> 

background-color không làm việc để .. :-(Ví dụ của tôi là một chuỗi JavaScript, thats lý do tại sao tôi thoát URL

Cảm ơn bạn đã trợ giúp :-)

Answer 1

bạn thậm chí không cần dấu ngoặc kép.

background:url(./images/system/button/close/close.png) 

sử dụng một div nếu bạn có thể

<div style="height:20px; width:20px; padding:9px; background:url(./images/system/button/close/close.png) no-repeat red"></div> 

Answer 2

Bạn đang thoát dấu ngoặc kép và đã chuyển dấu ngoặc kép thứ hai và dấu ngoặc kép.

Trong CSS:

url('foo') /* is technically fine but broken on IE/Mac */ 
url(foo)  /* is fine */ 
url('foo)' /* is not fine */ 
url(\'foo\') /* is not fine */ 

Và như Ross chỉ ra trong một chú thích, thuộc tính src của bạn bị thiếu. Tôi hình dung rằng việc đặt hình nền trên hình ảnh có nền mờ sẽ hoạt động, nhưng nếu bạn không có hình ảnh nội dung, không sử dụng phần tử <img> (và không ẩn bất kỳ hình ảnh nội dung nào bạn có trong đó background-image thuộc tính).

Answer 3

Không hiểu lý do bạn thoát khỏi dấu ngoặc kép.

<img border="0" style="display:block; width:20px; height:20px; background-color:red; padding:9px; background:url('./images/system/button/close/close.png') no-repeat" /> 

Điều đó có hiệu quả không?

Và bạn có chắc chắn về. trong URL?

Answer 4

Vâng, ngay cả khi nó là lạ để sử dụng thẻ <img/> cho việc này. (Nó không phải là mục đích của nó, sử dụng src hoặc một div với nền ...)

Here, nó làm việc

Answer 5

background-color:red; đang được thay thế bởi background:.

Kết hợp nguồn gốc của bạn. Sau đó, bạn có thể tinh chỉnh thêm nữa bằng cách xóa dấu ngoặc kép trong URL() của nền và khoảng thời gian từ URL. nếu nó liên quan đến vị trí của trang, nó chỉ xóa bỏ dấu gạch chéo ngược.

<img border="0" style="display:block; width:20px; height:20px; padding:9px; background:#F00 url(images/system/button/close/close.png) no-repeat" />

cuối nếu bạn cần phải có một alt thuộc tính nội dung của nó sẽ hiển thị vì không có nguồn. Sử dụng hình ảnh trong suốt nếu bạn thêm alt.