关于vue.js:提升布局能力理解-CSS-的多种背景及使用场景和技巧

作者：Ahmad shaded
译者：前端小智
起源：sitepoint

点赞再看，微信搜寻 【大迁世界】 关注这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588… 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。

CSS background是最罕用的 CSS 属性之一。然而，并不是所有开发人员都晓得应用多种背景。这段时间都在关注应用多种背景场景。在本文中，会具体介绍 background-image` 属性，并联合图形来解释多个背景应用形式以及其理论益处。

如果你还理解 CSS background 属性，能够去先 MDN 查看相干的常识。

介绍

CSS background属性是以下属性的简写:

background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size 和 background-attachment.

对于本文，将重点介绍 background-image，background-position 和background-size。你筹备好了吗？让咱们开始吧！

思考上面的例子:

.element {background: url(cool.jpg) top left/50px 50px no-repeat;
}

背景图片位于元素的左上角，大小为50px * 50px。理解并记住地位和大小的程序很重要。

在上图中，background-position前面是background-size。它们的程序是不能调换的，否则有效，如下所示：

.element {
    /* 正告：有效的 CSS */
    background: url(cool.jpg) 50px 50px/top left no-repeat;
}

Background Position

元素的定位绝对于 background-origin 属性设置的定位层。我喜爱 background-position 的灵活性，它有多种定位元素的形式：

• 关键字值（top，right，bottom，left，center）
• 百分比值，如: 50%
• 长度值，如:20px, 2.5rem
• 边缘偏移值，如：top 20px left 10px

坐标零碎从左上角开始，默认值为0% 0%。

值得一提的是，top left的值与 left top 的值雷同。浏览器足够聪慧，能够确定其中哪个个用于 x 轴，哪个用于 y 轴。

.element {background: url(cool.jpg) top left/50px 50px no-repeat;
    /* 下面与上面雷同 */
    background: url(cool.jpg) left top/50px 50px no-repeat;
}

Background Size

对于 background-size 属性，第一个是width，第二个是height。

不用应用两个值，你能够应用一个值，它示意宽度和高度都一样。

当初，我曾经理解了 CSS background的工作原理，上面来探讨下如何应用多个背景。

多个背景

background属性能够具备一层或多层，以逗号分隔。如果多个背景的大小雷同，则其中一个将笼罩另一个背景。

.element {background: url(cool.jpg) top left/50px 50px no-repeat,
    url(cool.jpg) center/50px 50px no-repeat;
}

在上图中，咱们有两个背景层。每个地位都不同。这是多背景的根本用法，让咱们钻研一个更高级的示例。

搁置程序

当搁置多个背景时，其中一个背景占据其父级的全副宽度和高度时，搁置程序可能会有点乱，思考上面例子：

.hero {
  min-height: 350px;
  background: url('table.jpg') center/cover no-repeat,
    url('konafa.svg') center/50px no-repeat; 
}

咱们有一个盘子和一张桌子的图片，你认为哪个会在下面？

答案就是 桌子。在 CSS 中，第一个背景能够搁置在第二个背景上，第二个背景能够搁置在第三个背景上，依此类推。通过替换背景的程序，能够失去预期的后果。

用例和范例

遮罩层

通常，咱们可能须要某局部的顶部搁置一个遮罩层，以便使文本易于浏览。通过重叠两个背景能够轻松实现此操作。

.hero {background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),
    url("landscape.jpg") center/cover;
}

好的是，咱们能够应用与上述雷同的办法对元素利用色调。思考以下：

.hero {background: linear-gradient(135deg, rgba(177, 234, 77, 0.25), rgba(69, 149, 34, 0.25),
    url("landscape.jpg") center/cover;
}

用 CSS 绘图

应用 CSS 突变绘制的可能性是有限的。你能够应用 linear-gradient 或radial-gradient等。接着，咱们来看看如何应用它两兄弟绘制笔记本电脑。

拆解笔记本电脑，看看咱们须要应用什么突变。

拆解笔记本电脑的时，更容易思考如何应用多个 CSS 背景来实现它。

接下来是图纸。首先是将每个突变定义为 CSS 变量及其大小。我喜爱应用 CSS 变量，因为它能够缩小代码的复杂性，使代码更简洁，更易于浏览。

:root {--case: linear-gradient(#222, #222);
  --case-size: 152px 103px;

  --display: linear-gradient(#fff, #fff);
  --display-size: 137px 87px;

  --reflection: linear-gradient(205deg, #fff, rgba(255, 255, 255, 0));
  --reflection-size: 78px 78px;

  --body: linear-gradient(#888, #888);
  --body-size: 182px 9px;

  --circle: radial-gradient(9px 9px at 5px 5.5px, #888 50%, transparent 50%);
  --circle-size: 10px 10px;
}

当初咱们定义了突变及其大小，下一步是搁置它们。思考下图，以取得更好的视觉解释。

显示影像

如前所述，应该首先定义须要在顶部的元素。在咱们的状况下，显示影像应该是第一个突变。

显示 LCD

显示屏位于 x 轴核心，距 y 轴6px。

显示 外壳

外壳位于显示器下方，位于 x 轴的核心，距 y 轴的地位为0px。

主体

这是图形中最乏味的组件。首先，主体是一个矩形，每个侧面（左侧和右侧）有两个圆圈。

最终后果

:root {--case: linear-gradient(#222, #222);
  --case-size: 152px 103px;
  --case-pos: center 0;

  --display: linear-gradient(#fff, #fff);
  --display-size: 137px 87px;
  --display-pos: center 6px;

  --reflection: linear-gradient(205deg, #fff, rgba(255, 255, 255, 0));
  --reflection-size: 78px 78px;
  --reflection-pos: top right;

  --body: linear-gradient(#888, #888);
  --body-size: 182px 9px;
  --body-pos: center bottom;

  --circle: radial-gradient(9px 9px at 5px 5.5px, #888 50%, transparent 50%);
  --circle-size: 10px 10px;
  --circle-left-pos: left bottom;
  --circle-right-pos: right bottom;
}

.cool {
  width: 190px;
  height: 112px;

  background-image: var(--reflection), var(--display), var(--case), var(--circle), var(--circle), var(--body);

  background-size: var(--reflection-size), var(--display-size), var(--case-size), var(--circle-size), var(--circle-size), var(--body-size);

  background-position: var(--reflection-pos), var(--display-pos), var(--case-pos), var(--circle-left-pos), var(--circle-right-pos), var(--body-pos);

  background-repeat: no-repeat;

  /*outline: solid 1px;*/
}

混合多种背景

混合应用多个背景时会令人兴奋。考虑一下您在 CSS 中有一个背景图像，并且想要将其变成黑白图像。

.hero {background: linear-gradient(#000, #000),
  url("landscape.jpg") center/cover;
  background-blend-mode: color;
}

人才们的 【三连】 就是小智一直分享的最大能源，如果本篇博客有任何谬误和倡议，欢送人才们留言，最初，谢谢大家的观看。

原文：https://css-tricks.com/css-ba…

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

交换

文章每周继续更新，能够微信搜寻 【大迁世界】 第一工夫浏览，回复 【福利】 有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，欢送 Star。