首页 > 其他分享 >css div 三张背景图片

css div 三张背景图片

时间:2024-03-05 17:57:19浏览次数:28  
标签:repeat container image 背景图片 background div css 图片

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

相关文章

  • Codeforces Round 930 (Div. 1)
    Preface虽然难得有Div1的CF,但由于在周四晚上学校要断电就没打这两天有空去补了下发现好像错过了最适合我的一场,AB都是一眼题,C是经典图论建模,D是DS典题没有Counting我直接爽飞,不过估计现场打的话写个ABC差不多了,D的码量还是挺大的A.BitwiseOperationWizard很有意思的一个......
  • 前端基础学习1 | Web、Html、CSS
    前端基础学习1|Web、Html、CSS1、Web基础知识Web(wwwWorldWideWeb),全球广域网,也称万维网,能够通过浏览器访问的网站Web网站的工作流程Web标准,也称为网页标准,由一些列的标准组成,大部分由W3C(WorldWideWebConsortium,万维网联盟)负责制定。Web标准由三个部分组成:HTML:......
  • 在vue项目中使用scss预处理器
    从Node.js12版本开始,`node-sass`被标记为不再维护,并且从npm上已经被移除。现在,推荐使用`sass`包替代`node-sass`。`sass`包是Sass的JavaScript实现,它比`node-sass`更快速、更现代化,并且与最新版本的DartSass兼容。在Vue项目中使用Sass,你应该安装sass包......
  • CSES1081:Common Divisors
    传送门题意:找到两个\(gcd\)最大的数。\(n\le2e5,a_i\le1e6\)。一种方法是枚举\(i:1\simn\),\(O(\sqrta_i)\)把\(a_i\)因数的出现次数加一。然后\(i:1000000\sim1\),如果\(cnt[i]>1\),输出\(i\)结束。复杂度\(O(n\sqrtV)\),\(2e8\),可惜CSES的机子跑不过。枚......
  • css Module里less里嵌套css,使用的时候,style.xxx不用嵌套吗?
    在CSSModules中,使用Less编译器编译并转换成模块化CSS后,你不需要在JavaScript中通过style.xxx的方式进行嵌套引用。当你在Less文件中使用嵌套语法编写样式时,编译过程会自动将这些嵌套转换为扁平化的类名,并且生成一个映射对象。例如,在Less文件(假设为styles.module.less)中:.contain......
  • Codeforces Round 930 (Div. 1) C dij 建图
    离较好的方法差一点。考虑到了可以按照枚举属性并按照当前属性从小到大排序,这样可以从一个点到大另一个点。设当前在排序序列中点为\(i\)当\(i\)走向\(k,i>=k\)需要支付\(c_k\)的代价。而\(i\)到\(k,i<k\)则需\(k-i+c_k\)的代价。则对于不同的\(i\)由于代价没有连续性,当时想......
  • 【HarmonyOS】Button按钮设置带有渐变色的背景图片无效
    ​【关键字】Button、渐变色、背景图片、backgroundImage 【问题描述】在为Button组件设置背景图片时未生效,这里准备的背景图片是渐变色的,当在代码中设置完成之后,发现按钮并没有像预想的那样变成渐变色,代码如下:​效果是这样的:​这也太奇怪了,难道是Button按钮的背景图片不......
  • Codeforces Round 892 (Div. 2)
    \[\large\text{Round7:CodeforcesRound892(Div.2)(VP)}\]一言:所谓人,无论是谁到了最后,都会形单影只。——悠久之翼2最令人无语的是最后三分钟交代码的时候把\(\text{D}\)题交到了\(\text{E}\)题,结果能过的代码直接没有过。。\(\text{D:AndreyandEscapefr......
  • Codeforces Round 893 (Div. 2)
    \[\large\text{Round3:CodeforcesRound893(Div.2)(VP)}\]一言:从你站在桥上看我的那一刻起你就是我的世界——火影忍者不是很满意,还是没有突破\(\text{D}\)题,确实是没有想到这题竟然如此毒瘤。。\(\text{D:TreesandSegments}\)首先不难想到一种思路,就是枚举......
  • Codeforces Round 806 (Div. 4) A-G(补题)
    A.YESorYES?思路:一次判断三个字母是否是y、e、s的大小写即可。这题是很久前写的,哈哈,马蜂改了不少。。#include<bits/stdc++.h>usingnamespacestd;intn;chars[5];intmain(){ scanf("%d",&n); for(inti=1;i<=n;i++){ scanf("%s",s+1); if......