background

程序媛Joanna
0 阅读4分钟

我问豆包，什么是背景？她说：

“背景” 是多义词，核心围绕「衬托主体」「前提环境」「底层支撑」，不同场景含义完全不同，一句话总结区别: ✅看画面 → 衬托主体的环境 ✅看人物 → 履历/家世资源 ✅看事件 → 发生的前提环境 ✅看科技 → 后台/辅助运行 ✅看创作 → 故事的时空设定

没看懂她在说什么，但我明白了，背景远比我想象中复杂。

站在前端开发的视角，我通常理解的背景分为以下几个部分：

背景容器

既然要设置背景，当然要明确给哪个主体设置背景。 so, let's create a container.

 <style>
   .bgTestContainer {
      margin: 20px;
      border: 6px dashed #666;
      padding: 20px;
      font-size: 14px;
      line-height: 22px;
      color: #1F2329;
    }
 </style>
 
 <div class="bgTestContainer">
    <div>春江潮水连海平，海上明月共潮生。</div>
    <div>滟滟随波千万里，何处春江无月明。</div>
    <div>江流宛转绕芳甸，月照花林皆似霰。</div>
    <div>空里流霜不觉飞，汀上白沙看不见。</div>
    <div>江天一色无纤尘，皎皎空中孤月轮。</div>
    <div>江畔何人初见月？江月何年初照人？</div>
    <div>人生代代无穷已，江月年年望相似。</div>
    <div>不知江月待何人，但见长江送流水。</div>
    <div>白云一片去悠悠，青枫浦上不胜愁。</div>
    <div>谁家今夜扁舟子？何处相思明月楼？</div>
    <div>可怜楼上月裴回，应照离人妆镜台。</div>
    <div>玉户帘中卷不去，捣衣砧上拂还来。</div>
    <div>此时相望不相闻，愿逐月华流照君。</div>
    <div>鸿雁长飞光不度，鱼龙潜跃水成文。</div>
    <div>昨夜闲潭梦落花，可怜春半不还家。</div>
    <div>江水流春去欲尽，江潭落月复西斜。</div>
    <div>斜月沉沉藏海雾，碣石潇湘无限路。</div>
    <div>不知乘月几人归，落月摇情满江树。</div>
  </div>

简单加些样式，最终长这样。（我很喜欢的《春江花月夜》，分享给大家）

image.png

背景色 background-color

接下来，给这个容器加一个背景色

      background-color: #AD8551;

现在长这样，可见背景色默认会覆盖到边框区域

image.png

背景覆盖区域 background-clip

我们可以通过background-clip设置背景覆盖区。当设置成border-box时，就会如上图所示；

设置成padding-box时，背景不会覆盖边框；

image.png

设置成content-box时，背景仅覆盖内容区域；

image.png

还有一种骚操作，把background-clip设置为text, 并把字体颜色设置为透明，就会出现这种效果：背景被裁剪成文字的前景色

image.png

背景图片 background-image

光设置颜色是很单调的，还可以为背景设置图片，这就复杂起来了。

背景图片可以设置为多张图片，多张图片分图层绘制，第一张图片绘制于第二张上方，以此类推。因此第一张图片最接近用户。

元素的边框border会在背景图片之上被绘制，而 background-color会在背景图片之下绘制。

加张通过css函数生成的背景图片

    background-image: radial-gradient(
      circle at 0 0,
      #e6aa5c 200px,
      transparent 200px
    )

image.png

此时，我们发现边框内出现了不想要的背景，因为background-clip的默认值为border-box,我们改成padding-box就ok了

   background-clip: padding-box;

image.png

背景位置 background-origin + background-position

背景图片可以设置起始点位置，由两个属性结合决定。

background-origin决定背景图片所在的图层，background-position决定在图层上起始点位置的偏移。 将背景图片向右、向下移动100px:

background-position: 100px 100px;

image.png

背景大小 background-size

背景图片大小可以通过多找那个方式设置，摘取MDN用例如下：

/* 关键字 */ 
background-size: cover 
background-size: contain 

/* 一个值：这个值指定图片的宽度，图片的高度隐式的为 auto */ 
background-size: 50% 
background-size: 3em 
background-size: 12px 
background-size: auto 

/* 两个值:第一个值指定图片的宽度，第二个值指定图片的高度 */ 
background-size: 50% auto 
background-size: 3em 25% 
background-size: auto 6px 
background-size: auto auto 

/* 逗号分隔的多个值：设置多重背景 */ 
background-size: auto, auto /* 不同于 background-size: auto auto */ 
background-size: 50%, 25%, 25% 
background-size: 6px, auto, contain

背景重复 background-repeat

定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者不重复。

尝试使用两张背景图, 并通过background-position和background-size来设置背景图片大小和位置

/* background属性：background-image background-position / background-size background-repeat */
background: 
      radial-gradient(
      circle at 0 0,
      #e6aa5c 200px,
      transparent 200px
    ) 0 0 / 100% 50% no-repeat,
    radial-gradient(
      circle at 100% 100%,
      #e6aa5c 200px,
      transparent 200px
    ) 100% 100% / 100% 50% no-repeat;

最终效果如图所示

image.png

avatar
文章
阅读
粉丝