css可以拉伸一张图片的中间部分吗
如下，图1作为背景图，css可以实现变成图2的效果吗？
图1
图2
感谢两位的回答，但是试了下并不能实现呢>_<||
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style type="text/css">
#round2 {
width: 300px;
height: 27px;
-webkit-border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAbCAYAAABm409WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA9JJREFUeNqklrtPXEcUxs/dXXZZXiueAiGIsBwjGgoorBQ0tC6iKEWkVBs6UiZKmqR0Z4nGEpZoYqT4T0hLRWlTmIKIPCweEQQC4rmwyz5yfuM5V8M1EKSM9DGXmTPfd+acMzMrjUZDQszMzEixWBRtacVnileK14qqouFR9WOvvA22N7ZMcqBWq8ni4mIxiqKfhoaGZGRkRFpbW6Wnp0d0zDkB4eHh4eTx8fHkxsbGl1tbW4x/peMvk3yRX/D+nyjKa/e0o6Pjm6mpKWlpaZFSqSRXV1dSr9fjXaZSKWlqapJ0Oi35fF7Oz89leXlZTk5O5nT9j4qLDwSUfES778bGxmbHx8fl6OhIKpWKm4Pcua2E2JsYOwLNzc2iTsnq6qqsra29UNNnindJgfmJiYnZwcFBOT09daHC05DI20m1Wr02hy07am9vl+3tbVlZWUHk6zgHavTD8PDwbH9/vxwcHLjFgIW7u7ui8XaigTOOrKurS1jDOLbY9fX1CVybm5u/q+kcbmWVrDw9PS2Xl5cxSblclvX1ddcTGgRtFxYmkM1mZXR0VHK5XJwfvpeWlpjPUV5faLV8TrJYgCcYQs43xpBYUkEmk3HgGxvy1dnZ6RwIi0Gr7NeUCjzp7u6+Rr6/vx+TQ2ze05sIYI4EY2trWE/VIQg3ApN4w6ApE2+8ZtzyYQKWcBs3obOzMyeAoxQB67V9QpL7bVvWI4b3EFjMLf6WZHOGBhm5sh2YjbZBV0UcJltEbyEIkxoSh2Vrc+yWIsEpc1RbBYFdPVCFkLCtrS2u9aTATQ1CK5IwGtr+guHNxcWFIyQ0bBPjMM4hwpK13ULIfQWH5QFOuBH4hRCZqp1KSFgQClkZhonG3srW1gPuJ7jdQVPj8sDAgDOyxom00rPwBbdpHA7ment7na3N4djOzg7/51L6p6L4Vg+FI7Nt7u3tuYVcYhBTJSSRC5BvvC8UCrEjYXjgUs7vSXKYtXklmyXBYTkiwLXNgTIP6REitHpFS3jlExoViC+7UOBjxTrJAskKuq0lyX3sHyl+k+CpQ+hYsaCV1KahcKc7jHnyaTVgQ/URFg3dgpp+qtj2T2ssQJ9TtPBQ6MKSijy2k2mVEwpBCggT14TaPNfpnxUnxJ46wDzy3iNA8D9SjCseKrr9Vh8oCoqeRHT+8WR/EFrFgYI34K1iQ3HGE5+5K7yKP+3p+w+7xl2/KsygHHhx6neUThTCbQI17/HfnqNsvFGQZMiyPg95L56S+7W6/63E/VDyOaiFAiaSCvr7kocide+59TduP5L/167l418BBgDUk7CvG/Im0gAAAABJRU5ErkJggg==) 40 40 round;
}
.progress_out{
width: 300px;
height: 27px;
}
.progress_out>img{
width: 300px;
height: 27px;
object-fit: cover;
object-position: center;
}
</style>
</head>
<body>
效果一：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAbCAYAAABm409WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA9JJREFUeNqklrtPXEcUxs/dXXZZXiueAiGIsBwjGgoorBQ0tC6iKEWkVBs6UiZKmqR0Z4nGEpZoYqT4T0hLRWlTmIKIPCweEQQC4rmwyz5yfuM5V8M1EKSM9DGXmTPfd+acMzMrjUZDQszMzEixWBRtacVnileK14qqouFR9WOvvA22N7ZMcqBWq8ni4mIxiqKfhoaGZGRkRFpbW6Wnp0d0zDkB4eHh4eTx8fHkxsbGl1tbW4x/peMvk3yRX/D+nyjKa/e0o6Pjm6mpKWlpaZFSqSRXV1dSr9fjXaZSKWlqapJ0Oi35fF7Oz89leXlZTk5O5nT9j4qLDwSUfES778bGxmbHx8fl6OhIKpWKm4Pcua2E2JsYOwLNzc2iTsnq6qqsra29UNNnindJgfmJiYnZwcFBOT09daHC05DI20m1Wr02hy07am9vl+3tbVlZWUHk6zgHavTD8PDwbH9/vxwcHLjFgIW7u7ui8XaigTOOrKurS1jDOLbY9fX1CVybm5u/q+kcbmWVrDw9PS2Xl5cxSblclvX1ddcTGgRtFxYmkM1mZXR0VHK5XJwfvpeWlpjPUV5faLV8TrJYgCcYQs43xpBYUkEmk3HgGxvy1dnZ6RwIi0Gr7NeUCjzp7u6+Rr6/vx+TQ2ze05sIYI4EY2trWE/VIQg3ApN4w6ApE2+8ZtzyYQKWcBs3obOzMyeAoxQB67V9QpL7bVvWI4b3EFjMLf6WZHOGBhm5sh2YjbZBV0UcJltEbyEIkxoSh2Vrc+yWIsEpc1RbBYFdPVCFkLCtrS2u9aTATQ1CK5IwGtr+guHNxcWFIyQ0bBPjMM4hwpK13ULIfQWH5QFOuBH4hRCZqp1KSFgQClkZhonG3srW1gPuJ7jdQVPj8sDAgDOyxom00rPwBbdpHA7ment7na3N4djOzg7/51L6p6L4Vg+FI7Nt7u3tuYVcYhBTJSSRC5BvvC8UCrEjYXjgUs7vSXKYtXklmyXBYTkiwLXNgTIP6REitHpFS3jlExoViC+7UOBjxTrJAskKuq0lyX3sHyl+k+CpQ+hYsaCV1KahcKc7jHnyaTVgQ/URFg3dgpp+qtj2T2ssQJ9TtPBQ6MKSijy2k2mVEwpBCggT14TaPNfpnxUnxJ46wDzy3iNA8D9SjCseKrr9Vh8oCoqeRHT+8WR/EFrFgYI34K1iQ3HGE5+5K7yKP+3p+w+7xl2/KsygHHhx6neUThTCbQI17/HfnqNsvFGQZMiyPg95L56S+7W6/63E/VDyOaiFAiaSCvr7kocide+59TduP5L/167l418BBgDUk7CvG/Im0gAAAABJRU5ErkJggg==">
<div id="round2">楼主要的效果并没有实现</div>
<br/><br/>
效果二：
<div class="progress_out">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAbCAYAAABm409WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA9JJREFUeNqklrtPXEcUxs/dXXZZXiueAiGIsBwjGgoorBQ0tC6iKEWkVBs6UiZKmqR0Z4nGEpZoYqT4T0hLRWlTmIKIPCweEQQC4rmwyz5yfuM5V8M1EKSM9DGXmTPfd+acMzMrjUZDQszMzEixWBRtacVnileK14qqouFR9WOvvA22N7ZMcqBWq8ni4mIxiqKfhoaGZGRkRFpbW6Wnp0d0zDkB4eHh4eTx8fHkxsbGl1tbW4x/peMvk3yRX/D+nyjKa/e0o6Pjm6mpKWlpaZFSqSRXV1dSr9fjXaZSKWlqapJ0Oi35fF7Oz89leXlZTk5O5nT9j4qLDwSUfES778bGxmbHx8fl6OhIKpWKm4Pcua2E2JsYOwLNzc2iTsnq6qqsra29UNNnindJgfmJiYnZwcFBOT09daHC05DI20m1Wr02hy07am9vl+3tbVlZWUHk6zgHavTD8PDwbH9/vxwcHLjFgIW7u7ui8XaigTOOrKurS1jDOLbY9fX1CVybm5u/q+kcbmWVrDw9PS2Xl5cxSblclvX1ddcTGgRtFxYmkM1mZXR0VHK5XJwfvpeWlpjPUV5faLV8TrJYgCcYQs43xpBYUkEmk3HgGxvy1dnZ6RwIi0Gr7NeUCjzp7u6+Rr6/vx+TQ2ze05sIYI4EY2trWE/VIQg3ApN4w6ApE2+8ZtzyYQKWcBs3obOzMyeAoxQB67V9QpL7bVvWI4b3EFjMLf6WZHOGBhm5sh2YjbZBV0UcJltEbyEIkxoSh2Vrc+yWIsEpc1RbBYFdPVCFkLCtrS2u9aTATQ1CK5IwGtr+guHNxcWFIyQ0bBPjMM4hwpK13ULIfQWH5QFOuBH4hRCZqp1KSFgQClkZhonG3srW1gPuJ7jdQVPj8sDAgDOyxom00rPwBbdpHA7ment7na3N4djOzg7/51L6p6L4Vg+FI7Nt7u3tuYVcYhBTJSSRC5BvvC8UCrEjYXjgUs7vSXKYtXklmyXBYTkiwLXNgTIP6REitHpFS3jlExoViC+7UOBjxTrJAskKuq0lyX3sHyl+k+CpQ+hYsaCV1KahcKc7jHnyaTVgQ/URFg3dgpp+qtj2T2ssQJ9TtPBQ6MKSijy2k2mVEwpBCggT14TaPNfpnxUnxJ46wDzy3iNA8D9SjCseKrr9Vh8oCoqeRHT+8WR/EFrFgYI34K1iQ3HGE5+5K7yKP+3p+w+7xl2/KsygHHhx6neUThTCbQI17/HfnqNsvFGQZMiyPg95L56S+7W6/63E/VDyOaiFAiaSCvr7kocide+59TduP5L/167l418BBgDUk7CvG/Im0gAAAABJRU5ErkJggg==" >
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style type="text/css">
#round2 {
width: 300px;
height: 27px;
-webkit-border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAbCAYAAABm409WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA9JJREFUeNqklrtPXEcUxs/dXXZZXiueAiGIsBwjGgoorBQ0tC6iKEWkVBs6UiZKmqR0Z4nGEpZoYqT4T0hLRWlTmIKIPCweEQQC4rmwyz5yfuM5V8M1EKSM9DGXmTPfd+acMzMrjUZDQszMzEixWBRtacVnileK14qqouFR9WOvvA22N7ZMcqBWq8ni4mIxiqKfhoaGZGRkRFpbW6Wnp0d0zDkB4eHh4eTx8fHkxsbGl1tbW4x/peMvk3yRX/D+nyjKa/e0o6Pjm6mpKWlpaZFSqSRXV1dSr9fjXaZSKWlqapJ0Oi35fF7Oz89leXlZTk5O5nT9j4qLDwSUfES778bGxmbHx8fl6OhIKpWKm4Pcua2E2JsYOwLNzc2iTsnq6qqsra29UNNnindJgfmJiYnZwcFBOT09daHC05DI20m1Wr02hy07am9vl+3tbVlZWUHk6zgHavTD8PDwbH9/vxwcHLjFgIW7u7ui8XaigTOOrKurS1jDOLbY9fX1CVybm5u/q+kcbmWVrDw9PS2Xl5cxSblclvX1ddcTGgRtFxYmkM1mZXR0VHK5XJwfvpeWlpjPUV5faLV8TrJYgCcYQs43xpBYUkEmk3HgGxvy1dnZ6RwIi0Gr7NeUCjzp7u6+Rr6/vx+TQ2ze05sIYI4EY2trWE/VIQg3ApN4w6ApE2+8ZtzyYQKWcBs3obOzMyeAoxQB67V9QpL7bVvWI4b3EFjMLf6WZHOGBhm5sh2YjbZBV0UcJltEbyEIkxoSh2Vrc+yWIsEpc1RbBYFdPVCFkLCtrS2u9aTATQ1CK5IwGtr+guHNxcWFIyQ0bBPjMM4hwpK13ULIfQWH5QFOuBH4hRCZqp1KSFgQClkZhonG3srW1gPuJ7jdQVPj8sDAgDOyxom00rPwBbdpHA7ment7na3N4djOzg7/51L6p6L4Vg+FI7Nt7u3tuYVcYhBTJSSRC5BvvC8UCrEjYXjgUs7vSXKYtXklmyXBYTkiwLXNgTIP6REitHpFS3jlExoViC+7UOBjxTrJAskKuq0lyX3sHyl+k+CpQ+hYsaCV1KahcKc7jHnyaTVgQ/URFg3dgpp+qtj2T2ssQJ9TtPBQ6MKSijy2k2mVEwpBCggT14TaPNfpnxUnxJ46wDzy3iNA8D9SjCseKrr9Vh8oCoqeRHT+8WR/EFrFgYI34K1iQ3HGE5+5K7yKP+3p+w+7xl2/KsygHHhx6neUThTCbQI17/HfnqNsvFGQZMiyPg95L56S+7W6/63E/VDyOaiFAiaSCvr7kocide+59TduP5L/167l418BBgDUk7CvG/Im0gAAAABJRU5ErkJggg==) 40 40 round;
}
.c2 {display:flex;width:200px;height:27px;}
.c2::before {display:block;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAbCAYAAABm409WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA9JJREFUeNqklrtPXEcUxs/dXXZZXiueAiGIsBwjGgoorBQ0tC6iKEWkVBs6UiZKmqR0Z4nGEpZoYqT4T0hLRWlTmIKIPCweEQQC4rmwyz5yfuM5V8M1EKSM9DGXmTPfd+acMzMrjUZDQszMzEixWBRtacVnileK14qqouFR9WOvvA22N7ZMcqBWq8ni4mIxiqKfhoaGZGRkRFpbW6Wnp0d0zDkB4eHh4eTx8fHkxsbGl1tbW4x/peMvk3yRX/D+nyjKa/e0o6Pjm6mpKWlpaZFSqSRXV1dSr9fjXaZSKWlqapJ0Oi35fF7Oz89leXlZTk5O5nT9j4qLDwSUfES778bGxmbHx8fl6OhIKpWKm4Pcua2E2JsYOwLNzc2iTsnq6qqsra29UNNnindJgfmJiYnZwcFBOT09daHC05DI20m1Wr02hy07am9vl+3tbVlZWUHk6zgHavTD8PDwbH9/vxwcHLjFgIW7u7ui8XaigTOOrKurS1jDOLbY9fX1CVybm5u/q+kcbmWVrDw9PS2Xl5cxSblclvX1ddcTGgRtFxYmkM1mZXR0VHK5XJwfvpeWlpjPUV5faLV8TrJYgCcYQs43xpBYUkEmk3HgGxvy1dnZ6RwIi0Gr7NeUCjzp7u6+Rr6/vx+TQ2ze05sIYI4EY2trWE/VIQg3ApN4w6ApE2+8ZtzyYQKWcBs3obOzMyeAoxQB67V9QpL7bVvWI4b3EFjMLf6WZHOGBhm5sh2YjbZBV0UcJltEbyEIkxoSh2Vrc+yWIsEpc1RbBYFdPVCFkLCtrS2u9aTATQ1CK5IwGtr+guHNxcWFIyQ0bBPjMM4hwpK13ULIfQWH5QFOuBH4hRCZqp1KSFgQClkZhonG3srW1gPuJ7jdQVPj8sDAgDOyxom00rPwBbdpHA7ment7na3N4djOzg7/51L6p6L4Vg+FI7Nt7u3tuYVcYhBTJSSRC5BvvC8UCrEjYXjgUs7vSXKYtXklmyXBYTkiwLXNgTIP6REitHpFS3jlExoViC+7UOBjxTrJAskKuq0lyX3sHyl+k+CpQ+hYsaCV1KahcKc7jHnyaTVgQ/URFg3dgpp+qtj2T2ssQJ9TtPBQ6MKSijy2k2mVEwpBCggT14TaPNfpnxUnxJ46wDzy3iNA8D9SjCseKrr9Vh8oCoqeRHT+8WR/EFrFgYI34K1iQ3HGE5+5K7yKP+3p+w+7xl2/KsygHHhx6neUThTCbQI17/HfnqNsvFGQZMiyPg95L56S+7W6/63E/VDyOaiFAiaSCvr7kocide+59TduP5L/167l418BBgDUk7CvG/Im0gAAAABJRU5ErkJggg==) no-repeat left center;width:13px;height:27px;content:' ';}
.c2::after {display:block;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAbCAYAAABm409WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA9JJREFUeNqklrtPXEcUxs/dXXZZXiueAiGIsBwjGgoorBQ0tC6iKEWkVBs6UiZKmqR0Z4nGEpZoYqT4T0hLRWlTmIKIPCweEQQC4rmwyz5yfuM5V8M1EKSM9DGXmTPfd+acMzMrjUZDQszMzEixWBRtacVnileK14qqouFR9WOvvA22N7ZMcqBWq8ni4mIxiqKfhoaGZGRkRFpbW6Wnp0d0zDkB4eHh4eTx8fHkxsbGl1tbW4x/peMvk3yRX/D+nyjKa/e0o6Pjm6mpKWlpaZFSqSRXV1dSr9fjXaZSKWlqapJ0Oi35fF7Oz89leXlZTk5O5nT9j4qLDwSUfES778bGxmbHx8fl6OhIKpWKm4Pcua2E2JsYOwLNzc2iTsnq6qqsra29UNNnindJgfmJiYnZwcFBOT09daHC05DI20m1Wr02hy07am9vl+3tbVlZWUHk6zgHavTD8PDwbH9/vxwcHLjFgIW7u7ui8XaigTOOrKurS1jDOLbY9fX1CVybm5u/q+kcbmWVrDw9PS2Xl5cxSblclvX1ddcTGgRtFxYmkM1mZXR0VHK5XJwfvpeWlpjPUV5faLV8TrJYgCcYQs43xpBYUkEmk3HgGxvy1dnZ6RwIi0Gr7NeUCjzp7u6+Rr6/vx+TQ2ze05sIYI4EY2trWE/VIQg3ApN4w6ApE2+8ZtzyYQKWcBs3obOzMyeAoxQB67V9QpL7bVvWI4b3EFjMLf6WZHOGBhm5sh2YjbZBV0UcJltEbyEIkxoSh2Vrc+yWIsEpc1RbBYFdPVCFkLCtrS2u9aTATQ1CK5IwGtr+guHNxcWFIyQ0bBPjMM4hwpK13ULIfQWH5QFOuBH4hRCZqp1KSFgQClkZhonG3srW1gPuJ7jdQVPj8sDAgDOyxom00rPwBbdpHA7ment7na3N4djOzg7/51L6p6L4Vg+FI7Nt7u3tuYVcYhBTJSSRC5BvvC8UCrEjYXjgUs7vSXKYtXklmyXBYTkiwLXNgTIP6REitHpFS3jlExoViC+7UOBjxTrJAskKuq0lyX3sHyl+k+CpQ+hYsaCV1KahcKc7jHnyaTVgQ/URFg3dgpp+qtj2T2ssQJ9TtPBQ6MKSijy2k2mVEwpBCggT14TaPNfpnxUnxJ46wDzy3iNA8D9SjCseKrr9Vh8oCoqeRHT+8WR/EFrFgYI34K1iQ3HGE5+5K7yKP+3p+w+7xl2/KsygHHhx6neUThTCbQI17/HfnqNsvFGQZMiyPg95L56S+7W6/63E/VDyOaiFAiaSCvr7kocide+59TduP5L/167l418BBgDUk7CvG/Im0gAAAABJRU5ErkJggg==) no-repeat right center;width:13px;height:27px;content:' ';}
.c2 .c2ex {flex:1;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAbCAYAAABm409WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA9JJREFUeNqklrtPXEcUxs/dXXZZXiueAiGIsBwjGgoorBQ0tC6iKEWkVBs6UiZKmqR0Z4nGEpZoYqT4T0hLRWlTmIKIPCweEQQC4rmwyz5yfuM5V8M1EKSM9DGXmTPfd+acMzMrjUZDQszMzEixWBRtacVnileK14qqouFR9WOvvA22N7ZMcqBWq8ni4mIxiqKfhoaGZGRkRFpbW6Wnp0d0zDkB4eHh4eTx8fHkxsbGl1tbW4x/peMvk3yRX/D+nyjKa/e0o6Pjm6mpKWlpaZFSqSRXV1dSr9fjXaZSKWlqapJ0Oi35fF7Oz89leXlZTk5O5nT9j4qLDwSUfES778bGxmbHx8fl6OhIKpWKm4Pcua2E2JsYOwLNzc2iTsnq6qqsra29UNNnindJgfmJiYnZwcFBOT09daHC05DI20m1Wr02hy07am9vl+3tbVlZWUHk6zgHavTD8PDwbH9/vxwcHLjFgIW7u7ui8XaigTOOrKurS1jDOLbY9fX1CVybm5u/q+kcbmWVrDw9PS2Xl5cxSblclvX1ddcTGgRtFxYmkM1mZXR0VHK5XJwfvpeWlpjPUV5faLV8TrJYgCcYQs43xpBYUkEmk3HgGxvy1dnZ6RwIi0Gr7NeUCjzp7u6+Rr6/vx+TQ2ze05sIYI4EY2trWE/VIQg3ApN4w6ApE2+8ZtzyYQKWcBs3obOzMyeAoxQB67V9QpL7bVvWI4b3EFjMLf6WZHOGBhm5sh2YjbZBV0UcJltEbyEIkxoSh2Vrc+yWIsEpc1RbBYFdPVCFkLCtrS2u9aTATQ1CK5IwGtr+guHNxcWFIyQ0bBPjMM4hwpK13ULIfQWH5QFOuBH4hRCZqp1KSFgQClkZhonG3srW1gPuJ7jdQVPj8sDAgDOyxom00rPwBbdpHA7ment7na3N4djOzg7/51L6p6L4Vg+FI7Nt7u3tuYVcYhBTJSSRC5BvvC8UCrEjYXjgUs7vSXKYtXklmyXBYTkiwLXNgTIP6REitHpFS3jlExoViC+7UOBjxTrJAskKuq0lyX3sHyl+k+CpQ+hYsaCV1KahcKc7jHnyaTVgQ/URFg3dgpp+qtj2T2ssQJ9TtPBQ6MKSijy2k2mVEwpBCggT14TaPNfpnxUnxJ46wDzy3iNA8D9SjCseKrr9Vh8oCoqeRHT+8WR/EFrFgYI34K1iQ3HGE5+5K7yKP+3p+w+7xl2/KsygHHhx6neUThTCbQI17/HfnqNsvFGQZMiyPg95L56S+7W6/63E/VDyOaiFAiaSCvr7kocide+59TduP5L/167l418BBgDUk7CvG/Im0gAAAABJRU5ErkJggg==) repeat-x center center;background-size:5000px 27px;color:white;}
</style>
</head>
<body>
效果一：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAbCAYAAABm409WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA9JJREFUeNqklrtPXEcUxs/dXXZZXiueAiGIsBwjGgoorBQ0tC6iKEWkVBs6UiZKmqR0Z4nGEpZoYqT4T0hLRWlTmIKIPCweEQQC4rmwyz5yfuM5V8M1EKSM9DGXmTPfd+acMzMrjUZDQszMzEixWBRtacVnileK14qqouFR9WOvvA22N7ZMcqBWq8ni4mIxiqKfhoaGZGRkRFpbW6Wnp0d0zDkB4eHh4eTx8fHkxsbGl1tbW4x/peMvk3yRX/D+nyjKa/e0o6Pjm6mpKWlpaZFSqSRXV1dSr9fjXaZSKWlqapJ0Oi35fF7Oz89leXlZTk5O5nT9j4qLDwSUfES778bGxmbHx8fl6OhIKpWKm4Pcua2E2JsYOwLNzc2iTsnq6qqsra29UNNnindJgfmJiYnZwcFBOT09daHC05DI20m1Wr02hy07am9vl+3tbVlZWUHk6zgHavTD8PDwbH9/vxwcHLjFgIW7u7ui8XaigTOOrKurS1jDOLbY9fX1CVybm5u/q+kcbmWVrDw9PS2Xl5cxSblclvX1ddcTGgRtFxYmkM1mZXR0VHK5XJwfvpeWlpjPUV5faLV8TrJYgCcYQs43xpBYUkEmk3HgGxvy1dnZ6RwIi0Gr7NeUCjzp7u6+Rr6/vx+TQ2ze05sIYI4EY2trWE/VIQg3ApN4w6ApE2+8ZtzyYQKWcBs3obOzMyeAoxQB67V9QpL7bVvWI4b3EFjMLf6WZHOGBhm5sh2YjbZBV0UcJltEbyEIkxoSh2Vrc+yWIsEpc1RbBYFdPVCFkLCtrS2u9aTATQ1CK5IwGtr+guHNxcWFIyQ0bBPjMM4hwpK13ULIfQWH5QFOuBH4hRCZqp1KSFgQClkZhonG3srW1gPuJ7jdQVPj8sDAgDOyxom00rPwBbdpHA7ment7na3N4djOzg7/51L6p6L4Vg+FI7Nt7u3tuYVcYhBTJSSRC5BvvC8UCrEjYXjgUs7vSXKYtXklmyXBYTkiwLXNgTIP6REitHpFS3jlExoViC+7UOBjxTrJAskKuq0lyX3sHyl+k+CpQ+hYsaCV1KahcKc7jHnyaTVgQ/URFg3dgpp+qtj2T2ssQJ9TtPBQ6MKSijy2k2mVEwpBCggT14TaPNfpnxUnxJ46wDzy3iNA8D9SjCseKrr9Vh8oCoqeRHT+8WR/EFrFgYI34K1iQ3HGE5+5K7yKP+3p+w+7xl2/KsygHHhx6neUThTCbQI17/HfnqNsvFGQZMiyPg95L56S+7W6/63E/VDyOaiFAiaSCvr7kocide+59TduP5L/167l418BBgDUk7CvG/Im0gAAAABJRU5ErkJggg==">
<div id="round2">楼主要的效果并没有实现</div>
<br/><br/>
效果二：
<div style="display:flex;">
<div class="c2">
<div class="c2ex">是这样的么</div>
</div>
</div>
</body>
</html>
给对应的图片设置样式
{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
http://jsbin.com/sutohaxahe/1/edit?html,css,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<span class="title">这是我使用的图片</span>
<img src="http://www.w3school.com.cn/i/border.png">
<div id="round">看我被图片包围了</div>
<div class="title">楼主的图片</div>
<img src="https://sfault-image.b0.upaiyun.com/333/390/3333902996-5a02cf581ceb1_articlex">
<div id="round2">楼主要的效果</div>
</body>
</html>
css部分
#round
{
-moz-border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 round; /* Old Firefox */
-webkit-border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 round; /* Opera */
border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 round;
}
#round2 {
-webkit-border-image:url(https://sfault-image.b0.upaiyun.com/333/390/3333902996-5a02cf581ceb1_articlex) 40 40 ;
border-image:url(https://sfault-image.b0.upaiyun.com/333/390/3333902996-5a02cf581ceb1_articlex) 40 40 repeated;
}给设置背景图的盒子，设置background-size:100%，在设置你想要的宽度
楼主想要得应该是类似游戏引擎中的 Sprite九宫格 , 局部拉伸效果 , 纯css应该是没法完美实现的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style type="text/css">
:root{
--bg-img:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAbCAYAAABm409WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA9JJREFUeNqklrtPXEcUxs/dXXZZXiueAiGIsBwjGgoorBQ0tC6iKEWkVBs6UiZKmqR0Z4nGEpZoYqT4T0hLRWlTmIKIPCweEQQC4rmwyz5yfuM5V8M1EKSM9DGXmTPfd+acMzMrjUZDQszMzEixWBRtacVnileK14qqouFR9WOvvA22N7ZMcqBWq8ni4mIxiqKfhoaGZGRkRFpbW6Wnp0d0zDkB4eHh4eTx8fHkxsbGl1tbW4x/peMvk3yRX/D+nyjKa/e0o6Pjm6mpKWlpaZFSqSRXV1dSr9fjXaZSKWlqapJ0Oi35fF7Oz89leXlZTk5O5nT9j4qLDwSUfES778bGxmbHx8fl6OhIKpWKm4Pcua2E2JsYOwLNzc2iTsnq6qqsra29UNNnindJgfmJiYnZwcFBOT09daHC05DI20m1Wr02hy07am9vl+3tbVlZWUHk6zgHavTD8PDwbH9/vxwcHLjFgIW7u7ui8XaigTOOrKurS1jDOLbY9fX1CVybm5u/q+kcbmWVrDw9PS2Xl5cxSblclvX1ddcTGgRtFxYmkM1mZXR0VHK5XJwfvpeWlpjPUV5faLV8TrJYgCcYQs43xpBYUkEmk3HgGxvy1dnZ6RwIi0Gr7NeUCjzp7u6+Rr6/vx+TQ2ze05sIYI4EY2trWE/VIQg3ApN4w6ApE2+8ZtzyYQKWcBs3obOzMyeAoxQB67V9QpL7bVvWI4b3EFjMLf6WZHOGBhm5sh2YjbZBV0UcJltEbyEIkxoSh2Vrc+yWIsEpc1RbBYFdPVCFkLCtrS2u9aTATQ1CK5IwGtr+guHNxcWFIyQ0bBPjMM4hwpK13ULIfQWH5QFOuBH4hRCZqp1KSFgQClkZhonG3srW1gPuJ7jdQVPj8sDAgDOyxom00rPwBbdpHA7ment7na3N4djOzg7/51L6p6L4Vg+FI7Nt7u3tuYVcYhBTJSSRC5BvvC8UCrEjYXjgUs7vSXKYtXklmyXBYTkiwLXNgTIP6REitHpFS3jlExoViC+7UOBjxTrJAskKuq0lyX3sHyl+k+CpQ+hYsaCV1KahcKc7jHnyaTVgQ/URFg3dgpp+qtj2T2ssQJ9TtPBQ6MKSijy2k2mVEwpBCggT14TaPNfpnxUnxJ46wDzy3iNA8D9SjCseKrr9Vh8oCoqeRHT+8WR/EFrFgYI34K1iQ3HGE5+5K7yKP+3p+w+7xl2/KsygHHhx6neUThTCbQI17/HfnqNsvFGQZMiyPg95L56S+7W6/63E/VDyOaiFAiaSCvr7kocide+59TduP5L/167l418BBgDUk7CvG/Im0gAAAABJRU5ErkJggg==);
}
.c2 {width:200px;padding: 14px 10px; border:10px solid transparent;border-image: var(--bg-img) 0 10 0 10 round;background: var(--bg-img) no-repeat center;border-image-outset:0px 10px;background-size: 1000px 100%;margin-left: 50px;}
</style>
</head>
<body>
<div class="c2"></div>
</body>
</html>