CSS: Khó khăn với các vị trí góc khác nhau vị trí nền

Question

Tôi đang gặp một số khó khăn khi tạo các nút bằng nhiều hình nền. Tôi biết tôi có thể sử dụng: trước và sau, nhưng tôi muốn tìm ra điều này nếu có thể.

Đây là Jsfiddle http://jsfiddle.net/syren/qerUT/1/

Trong đó, tôi đã thể hiện những gì tôi cuối cùng muốn nó như thế nào. Trong đó, tôi đã sử dụng

background-position: left top, 97% 90%; 

Chỉ để hiển thị những gì tôi muốn nó trông như thế nào. Vì tôi muốn nó có thể mở rộng một cách duyên dáng để sử dụng cho các nút khác và để dịch, tôi muốn sử dụng các nút này:

background-position: left top, right 5px bottom 5px; 

Nhưng điều này không hoạt động. Theo thông số kỹ thuật, nên tôi không chắc mình đang làm gì sai. Bất kỳ ý tưởng? Cảm ơn!

Answer 1

Tôi đã thử thực hiện chính xác điều tương tự. Rất tiếc, không có hỗ trợ thực sự nào cho right 5px bottom 5px vào lúc này.

Điều tôi đã làm là chụp ảnh và thực sự thêm pixel trong suốt ở bên phải và cuối hình ảnh để đưa nó vào vị trí tôi muốn. Nó không phải là đẹp, nhưng nó hoạt động hoàn hảo trong bất kỳ trình duyệt có hỗ trợ nhiều hình nền.

Để biết danh sách đầy đủ các tính năng nền nào được mỗi trình duyệt hỗ trợ, hãy truy cập tne Standardista CSS3 Background Properties page. Trong vị trí nền, nó liệt kê giá trị bù 4 giá trị khi chỉ được hỗ trợ bởi IE9 + và Opera 11+. Đó là một sự xấu hổ thực sự vì đây là một tính năng nền CSS3 không được hỗ trợ trên bảng.