白桦yuma
2021-05-27 13:55
采纳率: 98.1%
浏览 305

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>

 

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • 文盲老顾 2021-05-27 16:15
    已采纳
    <!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>
    已采纳该答案
    2 打赏 评论
  • 小P聊技术 2021-05-27 13:57
    给对应的图片设置样式
    
    {
    
    width: 100%;
    
    height: 100%;
    
    object-fit: cover;
    
    object-position: center;
    
    }
    打赏 评论
  • 小P聊技术 2021-05-27 13:58

    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;
    }
    打赏 评论
  • self-potato 2021-05-27 14:51

    给设置背景图的盒子,设置background-size:100%,在设置你想要的宽度

    打赏 评论
  • ElPsyCongr 2021-09-28 13:31

    楼主想要得应该是类似游戏引擎中的 Sprite九宫格 , 局部拉伸效果 , 纯css应该是没法完美实现的

    打赏 评论

相关推荐 更多相似问题