乐趣区

关于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-imagebackground-positionbackground-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 的灵活性,它有多种定位元素的形式:

  • 关键字值(toprightbottomleftcenter
  • 百分比值,如: 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-gradientradial-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。

退出移动版