css div 宽度 1300 高度 46,同时给它设置三张背景图片 堆叠同时显示 , 其一图片宽度1300 高度46 ,铺满整个div且距离最左侧偏移22px,其二图片宽度 44,高度43 ,在div的最左端,其三图片宽度83,高度43,在div的最右端,他们同时垂直居中在div中
.container { width: 1300px; height: 46px; background-image: url(whole-bg-image.png), url(left-image.png), url(right-image.png); background-repeat: no-repeat; background-position: 22px 0, /* 图片1位置:距左端22px,顶部对齐 */ 0 center, /* 图片2位置:左中心 */ right center; /* 图片3位置:右中心 */ background-size: cover, /* 图片1大小:铺满整个div */ 44px 43px, /* 图片2大小:宽度44px,高度43px */ 83px 43px; /* 图片3大小:宽度83px,高度43px */ display: flex; justify-content: space-between; align-items: center; overflow: hidden; }
上面的问题,对于第二张和第三张图片,我希望用伪元素的方案解决,请给出方案
<div class="container"> <div class="bg-first"></div> </div> .container { width: 1300px; height: 46px; position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; } .bg-first { background-image: url(whole-bg-image.png); background-position: 22px 0; background-repeat: no-repeat; background-size: cover; height: 100%; width: 100%; } .container::before, .container::after { content: ""; position: absolute; height: 43px; top: 50%; transform: translateY(-50%); /* 使图片垂直居中 */ } .container::before { left: 0; background-image: url(left-image.png); background-repeat: no-repeat; width: 44px; background-size: contain; /* 保持图片原有宽高比 */ } .container::after { right: 0; background-image: url(right-image.png); background-repeat: no-repeat; width: 83px; background-size: contain; }
标签:repeat,container,image,背景图片,background,div,css,图片 From: https://www.cnblogs.com/dhjy123/p/18054566