Thêm liên kết vào hình ảnh theo kiểu css

Question

Tôi đang tìm cách thêm liên kết vào hình ảnh trong trang mẫu kiểu acss để nó sẽ chuyển tới liên kết khi hình ảnh được nhấn.

Mã cho hình ảnh bản thân là:

#logo{ 
    background-image: url(images/logo.png); 
    width: 981px; 
    height: 180px; 
    margin-left: auto; 
    margin-right: auto; 

mã là gì để thêm vào cho phép nó để di chuyển đến một siêu liên kết? Ví dụ: Nếu tôi muốn nó để điều hướng đến http://home.com

Answer 1

Bạn không thể làm điều đó ...

qua css các URL bạn đặt trên background-image chỉ dành cho hình ảnh.

Via HTML bạn phải thêm href cho siêu liên kết của bạn theo cách này:

<a href="http://home.com" id="logo">Your logo</a> 

Với text-indent và một số khác css bạn có thể điều chỉnh một yếu tố của bạn để hiển thị chỉ là hình ảnh và nhấp vào nó, bạn sẽ đi vào liên kết của bạn.

---

EDIT:

Bởi vì tôi chắc chắn rằng bạn lười biếng để tìm kiếm những gì text-indent làm và cố gắng mã của tôi bạn có văn bản trên hình ảnh của bạn tôi ở đây một lần nữa để cho bạn và giải thích tại sao giải pháp của tôi là tốt hơn nhiều:

<a href="http://home.com" id="logo">Your logo name</a> 

khối này HTML là SEO thân thiện vì bạn có một số văn bản bên trong liên kết của bạn!

Làm thế nào để định dạng với css:

#logo { 
    background-image: url(images/logo.png); 
    display: block; 
    margin: 0 auto; 
    text-indent: -9999px; 
    width: 981px; 
    height: 180px; 
} 

Sau đó, nếu bạn không quan tâm đến SEO tốt để chọn câu trả lời khác.

Answer 2

Bạn không thêm liên kết vào biểu định kiểu. Chúng là để mô tả phong cách của trang. Bạn sẽ thay đổi đánh dấu của bạn hoặc thêm JavaScript để điều hướng khi hình ảnh được nhấp.

Dựa chỉ trên phong cách của bạn, bạn sẽ có:

<a href="home.com" id="logo"></a> 

Answer 3

tôi stumbled khi niêm yết cũ này cân nhắc câu hỏi này tương tự. Ban nhạc của tôi viện trợ cho câu hỏi này là để làm cho văn bản tiêu đề của tôi vào một liên kết. Sau đó tôi đã thay đổi màu sắc và loại bỏ trang trí văn bản bằng CSS. Bây giờ để làm cho toàn bộ hình ảnh tiêu đề là một liên kết, tôi mở rộng phần đệm của thẻ neo cho đến khi nó đến gần cạnh của hình ảnh tiêu đề .... Điều này làm tôi hài lòng và tôi đã chia sẻ.

Answer 4

Bạn có thể làm một cái gì đó giống như

<a href="http://home.com"><img src="images/logo.png" alt="" id="logo"></a> 

trong HTML

Answer 5

Tôi cần một liên kết đến hình ảnh của tôi "android-logo.png" trong css này vì vậy người dùng có thể vào ứng dụng của tôi

#header{ 
background: url(images/sawazine_13.jpg) right top no-repeat, url(images/android-logo.png) left center no-repeat #70af44; 
margin: 0; 
padding: 0; 
height: 120px; 
color: #05310C;