background

图解CSS:CSS背景(Part3)

前面已经花了两篇的篇幅(《CSS背景:Part1Part2》)介绍完了除background-size之外的所有background子属性的特性以及使用。众所周之,在Web中对于<img>引入的图片,我们可以显式使用widthheightaspect-ratioobject-fit等属性来调整图片尺寸,但对于背景图片,我们只能使用background-size来进行调整。那么background-size是如何决定背景图片尺寸的计算呢?如果你感兴趣的话,这篇文章可以告诉你很多不为人知的答案。

图解CSS: CSS 背景(Part2)

第一部分主要和大家一起探讨了 CSS background属性中的background-imagebackground-repeatbackground-attachment等属性。今天接着和大家一起来探讨其另外三个子属性,即 background-positionbackground-clipbackground-origin。感兴趣的同学请继续往下阅读!

图解CSS: CSS 背景(Part1)

背景(background)是 CSS 中最常见也是最基础的一个属性,它自 CSS 1.0 版本就开始有了。最早的时候我们可以通过 background 给一个元素盒子的背景层设置背景颜色(background-color)、背景图像(background-image)。如果是背景图像的话,还可以调整背景图像的位置(background-position)、设置背景图像的平铺方式(background-repeat)以及背景图像在背景层的依附模式(background-attachment)。不过,随着 CSS 技术不断向前发展,CSS 为开发者提供了一些新特性用来控制背景图像,比如背景图像的大小(background-size)、背景图像的剪切(background-clip)、背景图像的定位区域(background-origin)以及给同一个元素盒子设置多个背景。除此之外,CSS 还为 background 的一些老属性新增了功能,比如 background-position可以指定四个值,通过方向设置背景图像的位置,background-repeat 多了几种不同的平铺方式。另外,CSS 还可以使用 background-blend-mode 属性来设置不同的混合模式,从而改变背景图像的效果。

单聊background-repeat

background-repeatbackground属性之一,对于前端而言,这是再熟悉不过的属性之一了。那么为什么今天要来聊这个background-repeat属性呢?在CSS2.1中,众所周知,background-repeat属性具有四个常见的值repeatrepeat-xrepeat-yno-repeat。而今天要说不是这四个属性值,在CSS Backgrounds and Borders Module Level 3中,给background-repeat新增加了两个属性值roundspace。在接下的中,要讨论的就是新增的这两个属性值怎么使用,他们具有什么特性。

完美的页面背景图片制作

随着现在的大显屏越来越多,实现整个页面的背景相对来说是越来越困难。前段时间在《如何用CSS实现大背景样式》中和大家一起学习了web designer wall大师介绍的几种实现大背景制作的样式方法。但我们有时需要整个页面放一张大的背景图,而且让他适应任显屏的大小。听起来好像蛮复杂的一样,因为我们不知道我们的用户使用多大的显屏,所以我们也不知道我们要制作多大的背景图片才能适合。大家不用担心,今天给大家提供几种另个的大背景图的制作方法,用来帮助大家制作完美的页面背景。

如何用CSS实现大背景样式

Web页面的大背景制作有时的确烦人,今天看到了web designer wall写了一篇有关于这方面的教程《How to: CSS Large Background 》。从中学习了一下,特意整理一下贴上来与大家分享。

返回顶部