你真的熟悉background吗?

时间:2022-05-05 09:26:38

一两个月没更新博客了,因为放假刚在深圳找了实习,一直都比较忙碌,不过我觉得再忙,还是需要时间去沉淀一些东西,工作的时候别人看到的只是你有没有实现最终的结果,但自己是否思考,是否去总结,决定着你工作是否轻松。基础不好的话,很多时候时间都花费在修复各种bug上了。所以思考总结很重要,做出好维护的代码才能让我们轻松走天下。找实习还是比较顺利的,有空可以分享下经验。好了,进入正题了,今天分享的是css中的background,平常我们用的都是些常见的属性,今天来看看一些不常用的,其实还是很有价值的。

我们都知道background是一个复合属性,我们先来大概看看这些单一属性。

  • background-color
  • background-position
  • background-size
  • background-repeat
  • background-origin
  • background-clip
  • background-attachment
  • background-image

大部分其实都是比较简单的,今天主要分享下background-size,background-origin,background-clip。其他的可以自行查阅

1  background-size:水平方向 垂直方向,做移动端的时候经常需要用到这个。

属性值分别有:

1 设置具体的值 。background-size:100px 200px。你设置的多大  背景图片就有多大,当只设置一个值的时候高度会auto。

2 设置百分数 。background-size:100% 100% ,图片的宽高 会以容器的宽度为基准,来生成大小。当只设置一个值的时候,高度的值会默认为auto。但不一定会正好就等于图片的高度显示出来,我之前做一个移动端就是因为我设置的是background-size:100% ,后来发现背景图片的高度只显示了一部分,底部的就是看不到,但我们底部的背景又是需要展现出来的,后来改成background-size:100% 100%就好了。当然如果你的背景的重点不在下面。可以只写一个100%。

3 background-size: cover,这个就是不会考虑图片本身的比例,让图片能够把容器充满,所以很有可能图像只显示一部分,因此还是要根据你的需求来看。

如果你需要显示完整的图片,最好用background-size:100% 100%,如果图片的重点在上面,或者只显示一部分也没影响,可以用background-size:100% 和background-size: cover。

4 background-size: contain 把图像图像扩展至最大尺寸一直到。他们的宽度和高度都能接触到容器。

建议大家私下都动手试试,区别很明显。

2 background-clip:以前很少用这个属性,最近看翻译成中文的《CSS揭秘》,发现它还是很有用的。这本书也不错,可以买来看看。

background-clip: border-box|padding-box|content-box;

有三种值,分别是什么呢,先跟着我来看一个例子,假设我们现在要做一个透明的边框。我们可能会这样写

   border: 10px solid rgba(0,0,0,0.2);
width: 200px;
height: 200px;
background: #16ff00;
padding:10px;//测试需要

可是看效果,发现并不是我们想象中的样子,如下,我们会发现边框实际上是在背景上面的,这是什么原因呢?

你真的熟悉background吗?这不是一个bug,而是本来就是这样子,CSS2中语法规定了背景的渲染模式。就是通过background-clip这个属性来规定的

1 默认值是border-box,意思就是背景是从边框开始绘制的,也就是背景的颜色会包括border+padding+content,(content指的是内容区域),所以下面的背景才包括了边框。

2 当设置值为padding-box的时候,背景会从padding开始绘制,也就是包括padding+content,

3 设置值为content-box,背景颜色就只包括content了。

OK,那如果我们想实现透明边框,就让背景不会从边框绘制就好了。如下,两个属性值都实现了,只是第二个背景只包括内容,所以中间的padding就不会有背景了。大家可以记住这个特性,以很可能会用到。

你真的熟悉background吗?你真的熟悉background吗?

3 background-origin:这个属性呢,经常会与上面一个属性混淆,但其实不是一个东西,background-position这个属性大家都熟悉吧,规定背景显示的位置,但是位置总要有个标准来确定吧。这个标准呢,就是由background-origin这个属性来规定的,有下面三个值,原理跟上面是差不多。也有三个值。

padding-box:默认值。意思就是以padding开始为标准定位。

border-box:以padding开始为标准定位。

content-box:以内容区域为标准定位。

我们来看一个实际的效果,代码如下:

    width: 200px;
height: 200px;
background: url(li-ai-jun.png) no-repeat;
padding: 25px;
border: 10px dotted #000000;
background-repeat: no-repeat;
background-size: 100%;
如下,分别是默认情况,border-box,content-box等情况下的表现,应该一看就懂吧。至于平常能不能用到,就要看业务了。

你真的熟悉background吗?你真的熟悉background吗?你真的熟悉background吗?

好啦,今天的分享就到这里了,希望以后能分享更多的经验,最近也有一些朋友私信给我一些问题。有些可以解决,有些真的也是不太会,因为我也是用到什么研究什么,所以很多可能也无能为力,不过学到的,一定会用大白话分享出来。一起加油吧。

我是沐晴。不见不散。