2013-01-16 32 views
25

Có thể thêm border-radius trên background-image không?Bán kính viền trên nền ảnh

+2

Bối cảnh của một div, hình ảnh nền của trang thực tế ..? Ý anh là gì? Cần thêm thông tin chứ. – Bart

+1

Làm thế nào để câu hỏi này có thể được bình chọn hai lần? Nó có chất lượng rất kém. Bạn đã thử bất cứ điều gì chưa? Bạn đã thử Google chưa? Định nghĩa của bạn là "background-image" bởi vì như @Bart đã đề cập, nó có phải là nền của 'body' của bạn, một' div' ngẫu nhiên hay thậm chí là một phần tử 'pre'? Hãy cụ thể hơn. – Jelmer

+1

1. Hình nền của div 2. Tôi không muốn cắt hình nền theo bán kính đường viền được đặt trên div, vì hình nền của tôi nằm ở giữa và không chạm vào đường viền div để hình nền không phải là ' t cắt. –

Trả lời

1

Hãy thử điều này

div { 
     border: 10px solid white; 
     -moz-border-radius: 10px; 
     background:url(map_background_box_right.png); 
     } 
+1

cho crossbrowser bạn cần -moz-border-radius: 50px; và nếu bạn phải tối ưu hóa nghĩa cũ, bạn không thể làm điều này nếu không có các kịch bản bên ngoài như pie.htc [link] (http://css3pie.com/) –

17

Có nó có thể:

ảnh
div { 
    -webkit-border-radius: 50px; 
    -moz-border-radius: 50px; 
    border-radius: 50px; 
    border: none; 
    width: 500px; 
    height: 335px; 
    background: url(http://themescompany.com/wp-content/uploads/2012/02/6402.jpg); 
} 

Click here for demo.

+2

Điều này thật tuyệt, nhưng nếu tôi thêm ' background-position: 50px lặp lại nền: không lặp lại'. Hình nền chỉ ** được cắt theo đường viền div. –

+0

Tôi nghĩ rằng không có cách nào để thêm bán kính đường biên trực tiếp vào hình nền, nhưng bạn có thể làm điều đó với một sự gian lận: http://jsfiddle.net/fbDZb/8/ –

+0

David Czinege, cảm ơn, rất tiếc là tôi đã tìm kiếm giải pháp không có div bổ sung. Cảm ơn anyway :-) –

Các vấn đề liên quan