css基础笔记

1、CSS背景

(1)、background-size 属性

background-size 属性规定背景图片的尺寸,同时适用与字体图标方面的适用(主要在移动端用到较多)。

在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。

您能够以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。

 

 

(2)、background-origin 属性

background-origin 属性规定背景图片的定位区域。

背景图片可以放置于 content-box、padding-box 或 border-box 区域

 

 

(3)、background-clip 属性

     background-clip看似跟background-origin的用法差不多,在W3C上面也没有找到对这两个属性的区别方面的解释。但是其中肯定是有不同之处,如果有两个属性的功能是完全一样的,明显是毫无意义的,通过谷歌了一下,主要总结如下:

     两者重要的区别就是:背景能不能在边框上显示 

     background-clip:border|padding|content

     该属性指定了背景在哪些区域可以显示,但与背景开始绘制的位置无关,背景的绘制的位置可以出现在不显示背景的区域,这时就相当于背景图片被不显示背景的区域裁剪了一部分一样。(背景能在边框上显示)

   background-origin:padding|border|content

   该属性指定了背景从哪个区域(边框、补白或内容)开始绘制,但也仅仅能控制背景开始绘制的位置,你可以用这个属性在边框上绘制背景,但边框上的背景显不显示出来那就要由background-clip来决定了,(背景并没有在边框上显示)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值