2013-01-16 23 views
25

Czy można dodać border-radius na background-image?Promień obramowania na obrazie tła

+2

obraz tła div, tło obrazu rzeczywistej strony ..? Co masz na myśli? Potrzebujesz więcej informacji. – Bart

+1

Jak to możliwe, że pytanie to zostało dwukrotnie poprawione? Jest bardzo niskiej jakości. Czy próbowałeś już czegoś? Czy próbowałeś to zrobić Google? Jaka jest twoja definicja "obrazu tła", ponieważ jak wspomniał już @Bart, czy jest to tło twojego 'ciała', przypadkowego' div', a może nawet elementu 'pre'? Proszę być bardziej konkretnym. – Jelmer

+1

1. Obraz tła elementu div 2. Nie chcę przycinać obrazu tła za pomocą border-radius ustawionego na div, ponieważ obraz tła znajduje się pośrodku i nie dotyka granicy div, więc obraz tła nie jest " t przycięte. –

Odpowiedz

1

Spróbuj

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

dla crossbrowser, którego potrzebujesz -moz-border-radius: 50px; a jeśli musisz zoptymalizować stare, to znaczy, nie możesz tego zrobić bez zewnętrznych skryptów, takich jak pie.htc [link] (http://css3pie.com/) –

17

Tak to jest możliwe:

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

To jest miłe, ale co by było, gdybym dodał ' tło pozycja: 50px tło-powtórzyć: bez powtórzeń'. Obraz tła to ** tylko ** przycięty przez obramowanie elementu div. –

+0

Myślę, że nie ma sposobu, aby dodać promień obramowania bezpośrednio do obrazu tła, ale można to zrobić za pomocą kodu: http://jsfiddle.net/fbDZb/8/ –

+0

David Czinege, dzięki, niestety szukałem rozwiązanie bez dodatkowego elementu div. Dzięki i tak :-) –

Powiązane problemy