第五十一章 背景

背景是一个比较有助于我们,观察元素所占用面积的属性。但这依旧不是绝对的,因为在后面的章节,我们马上就会看到例外的情况。

背景(background)本身是一个复合属性,那么我们展开来讲解:

背景色 background-color

这个很容易理解,后面的取值可以是颜色的名称,也可以是颜色值,那么这些我们都讲过,所以也就不详细说明了。

#box {background-color: red;}

背景图 background-image

就是使用图片当做元素的背景,所以我们需要给出图片的地址,不过这里需要注意一下格式:

#box {background-image: url("miao.jpg");}

需要使用 url("") 的结构来标记一下。如果你打算清除元素已有的背景图片,也就是把元素的背景图片设置为无,那么可以这样写:

#box {background-image: none;}

因为没有图片地址,所以就不用使用上面那种结构了。

不过用到了图片以后,就要比纯色的情况复杂一些,所以我们有了如下属性:

图像重复 background-repeat

当图像的面积不足以覆盖整个元素的时候,默认会重复此图片,以将元素彻底覆盖。这就好像我们作图的时候用图案填充,又或者我们在铺地板上瓷砖的时候那种状态。

但有的时候,我们只需要在一个方向上进行重复,或者彻底不需要再进行重复,这时候就需要做一些设置:

#box {background-repeat: repeat; /* 两个方向上都重复,默认如此 */background-repeat: repeat repeat; /* 把两个方向分开写,第一个是横向(x 轴方向),第二个是纵向(y 轴方向) */background-repeat: no-repeat no-repeat; /* 不重复 */background-repeat: no-repeat; /* 与上面效果相同 */background-repeat: repeat-x; /* 在 x 轴方向(横向)重复 */background-repeat: repeat-y; /* 在 y 轴方向(纵向)重复 */}

图像位置 background-position

图像和元素如何对齐,比如放在元素中间,放在左上角……

#box {background-position: 120px 160px; /* 横向距离左侧 120px,纵向距离顶部 160px */background-position: 10% 15%; /* 用百分比也一样,第一个是横向,第二个是纵向 */background-position: top; /* top bottom left right 代表四个边,现在只写了一个边,就是值确定了横方向或者纵方向,那么另一个方向默认为 50%,就是中间 */background-position: center; /* 居中,或者写两个 center,表示两个方向都居中,不过因为像上面一样默认另一边 50%,所以一个也可以 */background-position: bottom 10px right 20px; /* 指定在某一边的偏移量,也可单独指定一边,或者和上面写法配合 */}

就那么几种取值,但是横向、纵向,一个值、两个值,一排列组合就很多了。找一个边界明显的图片设置一下看看效果,才是最快理解的方式。

图像尺寸 background-size

背景图片显示的尺寸,也是涉及到横纵两个方向。依旧可以用尺寸和百分比。然后由几个特殊值:

  • auto:自动大小,如果两个值都是 auto,那就是图片原始尺寸。如果只有一个 auto,则是确定一边之后,auto 这一边等比例缩放;
  • contain:保持图片比例,保证图片完整显示的情况下,尽可能大;
  • cover:保持图片比例,保证图片把元素完全覆盖的情况下,尽可能的小。

有点复杂,那就先读一遍好了,下一章我们稍微使用一下,才能更直观的去理解。而且后面我们也要用到的。理解是一个过程,不要追求看到就懂,都是在使用中不断理解的。我们看到别人用锤子,就是抡么,懂了,但是自己用,却因为不熟练砸到了手,很正常。经验是技能中很重要的一部分。

© 版权声明
THE END
喜欢就支持一下吧
点赞0赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容