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>

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

6条回答默认最新

文盲老顾 WEB应用领新星创作者 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>

本回答被题主选为最佳回答 , 对您是否有帮助呢?

查看更多回答(5条)

报告相同问题？

关注问题

css可以拉伸一张图片的中间部分吗 css
2021-05-27 13:55

回答 6 已采纳 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="vi
怎么用CSS实现鼠标移动到图片上更换为另一张图片？ css html 前端
2022-03-12 10:08

回答 3 已采纳这样改变不了，一个是图片类型引入，一个是背景引入，并不能替换。统一改成背景图 .bottomBox1{ width: 300px; height: 300px;
HTML+CSS可以制作出弧形文字吗？ css3 html5 前端
2021-12-31 16:38

回答 2 已采纳可以的。利用定位，再加上css3的变换属性，transform，roate（***deg）就可以实现。各种位置角度都能实现。给你写了个例子，你copy运行下就可以。如果对你有帮助，点下采纳一下，谢谢。
css让图片的某些区域拉伸，其他部分保持比例，起到类似于安卓中点九.9图的效果
2022-08-21 16:42

YSoup的博客 css图片拉伸后，让某些区域不变形的解决方案--类似于安卓中的点9图
开发前端css怎么快速取图片的十六进制 css html 前端
2022-01-22 10:03

回答 2 已采纳纯色图片的图片颜色么？有很多截图软件都带有取色功能的，比如：Snipaste
html里css把png图片放到另一张图片上 css3 前端
2022-04-28 10:59

回答 1 已采纳图片重叠你额可以通过position或者float属性让两个图片不在同一层就可以了，有png的话png要放在上层，通过z-index控制一下，另外一个问题jpg直接改png没啥意义吧，背景不会自己变透
前端css3动画部分有疑问希望友友们帮助解惑 css3 html 前端
2022-10-21 16:53

回答 2 已采纳 div+div加号又被称作兄弟选择器。A+B表示选择紧邻在A后面的B元素，且A和B必须拥有相同的父元素，所选到的仅为一个B元素标签。 2.-webkit-xxx是兼容写法，针对浏览器内核的。CS
css控制图片拉伸不变形
2016-08-18 16:01

一场夏末的思念的博客如果不控制图片的上传尺寸，在前端展示的时候图片会变形，让图片不变形可以从两个方面考虑。 1.图片按等比例缩放，充满父元素的大小，多余的部分截取（不显示），显示中间部分如果图片长/宽 >父元素长/宽，那就...
前端开发 css图片大小的设置 css
2023-03-27 15:31

回答 4 已采纳首先要确定div的宽高比和图片的宽高比一样，才可以在图片不变形的状态下撑满div，否则肯定会撑不满外层div设置宽高，内层img只需要设置width:100%或者height:100%就行，图片会自适
css背景图片把文字内容盖住 css html5 前端
2021-11-26 20:35

回答 1 已采纳你这个是 a标签的字体颜色和背景图片颜色一样都是白色不是覆盖了你改一下字体颜色就好了 color
纯css可以控制按圆弧旋转吗 css css3 前端有问必答
2022-01-20 11:12

回答 3 已采纳 css3动画使用CSS3实现椭圆动画效果 - 七分暖 - 博客园写在前面的话：有这样一个需求，在大屏中要实现几个球用椭圆形状的布局进行
【前端知识之CSS】CSS图片背景的知识
2022-06-18 23:14

饭啊饭°的博客本系列主要整理前端面试中需要掌握的知识点。本节介绍CSS图片背景的知识。
色弱可以学前端吗，qaq css html javascript
2022-05-17 01:07

回答 6 已采纳不能干美工，设计的活，但是前端除了这个都可以弄的，或者你可以主修后端，这个一点影响都没有的。
css解决多张图片如何统一大小且没拉伸问题
2018-09-13 15:56

金刚大力士的博客实际效果: 由于图片原始大小都不一样,强行设定大小值会导致拉伸,如果不设定大小则参差不齐。例如: //html <body> <img src="1.jpg" /> <img src="2.jpg&quot...
《前端学习》-css之border-image记录
2022-10-25 17:08

颠沛流离笑忘书的博客 css之border-image使用过程中解答疑惑记录
没有解决我的问题, 去提问

悬赏问题

¥15 微信会员卡等级和折扣规则
¥15 微信公众平台自制会员卡可以通过收款码收款码收款进行自动积分吗
¥15 随身WiFi网络灯亮但是没有网络，如何解决？
¥15 gdf格式的脑电数据如何处理matlab
¥20 重新写的代码替换了之后运行hbuliderx就这样了
¥100 监控抖音用户作品更新可以微信公众号提醒
¥15 UE5 如何可以不渲染HDRIBackdrop背景
¥70 2048小游戏毕设项目
¥20 mysql架构，按照姓名分表
¥15 MATLAB实现区间[a,b]上的Gauss-Legendre积分

码龄粉丝数原力等级 --

css可以拉伸一张图片的中间部分吗

6条回答默认最新

码龄粉丝数原力等级 --

悬赏问题

css可以拉伸一张图片的中间部分吗

6条回答 默认 最新

悬赏问题

6条回答默认最新