如何从图片来源围绕CSS组件制作框架

Question

I have a png picture that has some borders around and is empty inside http://i.imgur.com/ji4M0VW.png I wanted to use it as a frame for some text/picture that could be fit inside, sometimes this effect is visible on webpages when people are presenting content inside eg an iphone - the picture is just the border and the component inside is fully responsive. I played around, but I only managed to achieve something far from the expected result here https://jsfiddle.net/m6r2whyu/ . So far my CSS:

#borderimg2 { 
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(http://i.imgur.com/ji4M0VW.png) 30 stretch; /* Safari 3.1-5 */
    -o-border-image: url(http://i.imgur.com/ji4M0VW.png) 30 stretch; /* Opera 11-12.1 */
    border-image: url(http://i.imgur.com/ji4M0VW.png) 30 stretch;
}

does not work well. Does anyone know what could I fix here?

Answer 1

The way that i've accomplished this task before is to use Photoshop. There is an easy-to-use tool called the 'background eraser tool' that will allow you to erase the white space in the centre of your image so that it is transparent. Once you have a transparent inside, you could use the image as an overlay for another image.

Answer 2

Added some styles, the result is more or less ok

 #borderimg2 { border: 10px solid transparent; padding: 15px; -webkit-border-image: url(http://i.imgur.com/ji4M0VW.png) 30 stretch; /* Safari 3.1-5 */ -o-border-image: url(http://i.imgur.com/ji4M0VW.png) 30 stretch; /* Opera 11-12.1 */ border-image: url(http://i.imgur.com/ji4M0VW.png) 30 stretch; border-image-slice: 9% 15% 12% 15%; border-image-width: 33px; height: 300px; width: 300px; } 

 <p id="borderimg2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut placerat aliquet pellentesque. Pellentesque iaculisdiam sit amet vehicula mattis. Cras gravida sed libero sed consequat. Nam efficitur sed sem sed vehicula. Aliquam ultrices aliquam mattis. Nunc odio urna, pharetra a augue tempus, laoreet scelerisque odio. Cras non rutrum lectus. Vestibulum condimentum vehicula scelerisque. Sed sed mattis nibh. Aliquam porta dui a risus sodales accumsan. Nullam in neque diam.</p> 

resources

properties explained

online generator