css3系列之详解background

background

background 的几个属性回顾一下，而且还有css3 的几个属性。

　　background-color

　　background-image

　　background-repeat

　　background-position

　　background-attachment

　　background-origin

　　background-clip

　　background-size

-----------------------------------------------------------------------------------------------------------------

　　background-color:

设置背景颜色 支持 单词 ，十六进制正整数 #ff0  rgb   rgba  hsl  hsla  transparent 

 

　　background-image:

设置一张图片，或者多张背景图片

一般的话，也没有人 使用background-image 来放两张图片，在网络不好的情况下，有可能 图片显示不出来， 那么我们不能留个空位给 用户看吧。所以，这个时候，你可以再设置多一张图片，用来，第一张图片显示不出来的时候占位

 

　　background-repeat:

设置图片是否平铺，和平铺的效果 

参数：

　　repeat-x　　repeat-y　　repeat　　no-repeat   这一行值， 只能设置一个。

　　round　　space　　这一行值，可以设置一个 或 两个   第一个值代表横向， 第二个值代表 纵向。  如果只设置了一个值，那么这个值会 应用于 横向 和 纵向

　　默认值是：repeat  表示在 横向， 和纵向 都平铺

　　round：

当背景图像不能以整数次平铺时，会根据情况缩放图像。也就是说，如果图片平铺的大小不能再添加一个图片进去， 会压缩，或者拉伸其他图片。

记得这个 round 会 拉伸，或者 压缩图片就行， space,他不会拉伸图片， 但是有空白区域

　　space

不够填充的 地方， 有空白区域， 但是不会拉伸图片。

 

　　background-position:

根据容器来定位 图片的位置。  默认值是：0%  0% ，  第一个值设置 left  第二个值设置 top。 如果只设置一个值， 第二个值默认是 center

可以接受 定位 第二张图片， 第三张图片的写法， 只需要加个 ，号    例如 ：  background-position: 0  0 , 10px 10px

 

 

　　background-attachment：

定义滚动时背景图像相对于谁固定

参数：

　　scroll：其实很像  position: 的 fixed 效果。 看下面的 gif 图就知道啦。

　　local：也很像 position：的 absolute 。 也是观看下面的 gif图啦。

 

还有一个参数， fixed。他会根据 浏览器的窗口定位。  所以下面的设置， 我把位置调到了 刚好在div 容器里面。来看一下他的效果吧

 

 

　　background-origin： 

从哪里开始显示背景图片。说的是， 从 border  还是 padding  还是 content 呢。  默认值是 padding

参数：border-box　　padding-box　　content-box   从什么地方开始显示图片

　  background-clip：

从哪里截掉图片。 跟上面一样， 不过 默认的是 border

参数：border-box　　padding-box　　content-box   text   从什么地方 截掉图片。 text(是webkit独有的)

　　

 

其实呢，造成这种效果， 是因为 平铺造成的， 所以把平铺 设置成 no-repeat  看看， 然后你就会惊奇的发现， 上 左两条边框里面没有东西， 但是  下 右边框里面有东西。

 

还有最后一个值： text  这个值呢， 只有webkit内核的浏览器可以使用。 搭配  text-fill-color(也只有webkit内核的浏览器有)  使用。 

 

　　background-size：

参数：50%  50% (px)， 根据自身的需求 设置。

　　auto: 背景图片的真实大小(默认值)

　　cover: 将背景图片等比例缩放到完全覆盖容器大小。 有可能背景图片大小会超出容器。

　　contain：将背景图片等比例缩放到宽度或高度与容器相等的一边。背景图片一定会在里面， 不会超出。 但是有可能宽或高不够出现空白区域 

什么意思的，看看下面的例子：

转载于:https://www.cnblogs.com/yanggeng/p/11198516.html