1. Zuhause
  2. Frage und Antwort
  3. Randradius auf Hintergrundbild

Randradius auf Hintergrundbild

2013-01-16 12 views
25

Ist es möglich, border-radius auf background-image hinzuzufügen?Randradius auf Hintergrundbild

Quelle

2013-01-16 Michał Urban

+2

Hintergrundbild von einem div, Hintergrundbild der tatsächlichen Seite ..? Was meinen Sie? Benötigen Sie weitere Informationen. – Bart

+1

Wie ist es möglich, dass diese Frage zweimal hochgestuft wird? Es ist von sehr schlechter Qualität. Hast du schon etwas probiert? Hast du versucht Google zu googeln? Was ist deine Definition von "background-image", weil @Bart bereits erwähnt wurde, ist es der Hintergrund deines "body", eines zufälligen "div" oder vielleicht sogar eines "pre" Elements? Bitte sei spezifischer. – Jelmer

+1

1. Hintergrundbild von div 2. Ich möchte nicht Hintergrund-Bild von Border-Radius auf Div zugeschnitten, weil mein Hintergrundbild in der Mitte ist und nicht mit div Grenze so Hintergrund-Bild isn ' t beschnitten. –

Antwort

1

Versuchen Sie, diese

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

Quelle

2013-01-16 08:20:07 Nandu

+1

für Crossbrowser benötigen Sie -moz-border-Radius: 50px; und wenn Sie die alten ie's optimieren müssen, können Sie dies ohne externe Skripte wie pie.htch [link] (http://css3pie.com/) nicht tun. –

17

Ja es möglich ist:

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.

Quelle

2013-01-16 08:22:13

+2

Das ist schön, aber was wäre, wenn ich hinzufügen würde ' Hintergrund-Position: 50px Hintergrund-Wiederholung: keine Wiederholung. Hintergrundbild ist ** nur ** abgeschnitten durch Rand von div. –

+0

Ich denke, es gibt keine Möglichkeit, border-Radius direkt zum Hintergrundbild hinzuzufügen, aber Sie können das mit einem Cheat tun: http://jsfiddle.net/fbDZb/8/ –

+0

David Czinege, danke, leider habe ich gesucht Lösung ohne zusätzliche div. Danke trotzdem :-) –

Verwandte Themen

 Verwandte Themen