Làm cách nào tôi có thể định vị hình nền ở góc trên cùng bên trái và bên phải của phần tử html?

Question

Tôi đã nhận một đoạn văn và tôi muốn có một "điểm đánh dấu" hiển thị để hiển thị phần đầu và cuối của đoạn văn cho người dùng.

Tôi không gặp vấn đề gì khi hiển thị hình nền ở phía trên bên trái, nhưng tôi không biết cách định vị hình nền cho phần dưới bên phải. Ở đây css của tôi để định vị hình ảnh ở phía trên bên trái:

p[class] { 
    background-image: url("../../image/my_image.gif"); 
    background-position: left top; 
    background-repeat: no-repeat; 
} 

Tôi không tìm kiếm giải pháp bằng các phần tử html bổ sung !!! Nó chỉ cần sử dụng css! Do thực tế là đoạn văn đã đặt pseude-trước và giả sau khi các yếu tố tôi không thể sử dụng chúng ở đây. Vì vậy, câu hỏi là:

Làm cách nào tôi có thể định vị hình nền ở trên cùng bên trái và dưới cùng bên phải của phần tử html mà không sử dụng phần tử html bổ sung mà chỉ css (và không có phần tử giả)?

Answer 1

Cyrille gần nhưng sai. nó cần phải là số background-position: right bottom;

nói chung - có thể sử dụng giá trị số. Vì vậy, đối background-position: right bottom; bạn cũng có thể viết background-position: 100% 100%; và background-position: left top; sẽ cho kết quả trong background-position: 0 0;

cũng hãy nhìn vào các thông số kỹ thuật của W3C về điều này: http://www.w3.org/TR/css3-background/#the-background-position

để bình luận Sree của trên: đây là hoàn toàn sai, left: 0px ; top:0px; không tham khảo trên vị trí của các phần tử HTML riêng của mình khi sử dụng position:relative hoặc position:absolute

chỉnh sửa: nếu bạn muốn sử dụng nhiều hình nền, bạn có thể lưu ý nó als sau:

p[class] { 
    background-image: url("../../image/my_image.gif"), url("../../image/my_image.gif"); 
    background-position: left top, right bottom; 
    background-repeat: no-repeat; 
} 

nhìn vào http://caniuse.com/#feat=multibackgrounds cho hỗ trợ trình duyệt chéo

chào

tom

Answer 2

Điều gì về việc thử background-position: bottom right thay vì left top?

Answer 3

Nếu hỗ trợ trình duyệt không phải là một vấn đề cho bạn, bạn có thể làm với CSS3 nhiều nền: http://www.css3.info/preview/multiple-backgrounds/