视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
background相关属性的详细介绍
2020-11-27 18:52:33 责编:小采
文档


background-origin: 规定 background-position 属性相对于容器的哪一部分来定位。

  padding-box 背景图像相对于内边距框来定位;(默认)

  border-box背景图像相对于边框盒来定位;

  content-box背景图像相对于内容框来定位。

background-position:设置背景图像在容器显示的起始位置。

  默认值:0 0(从背景图的左上点开始显示);

  取值:Int px Int px;背景图的左上定点在容器的坐标位置,可以为负值。负值表示背景图左上点不在容器内,超出的部分隐藏。

  如果只设置一个值,另一个值将为“居中”(50%/center)

  如果采用百分数,则按如下公式计算坐标:

  x:(容器的宽度—背景图片的宽度)*x百分比,超出的部分隐藏;y:(容器的高度—背景图片的高度)*y百分比,超出的部分隐藏。

   所以left/top等价于0%,right/bottom等价于100%(背景图的右边/底边和容器重合),center等价于50%(背景图在容器中间)。

background-size:设置背景图的大小(IE8不支持此属性)

  百分比/length:若为百分数,背景图的尺寸为容器乘以百分数的乘积。只设一个,第二个为auto(以保持和原始背景图一样的长宽比例)。

  如果都设为100%,则背景图会铺满容器,但长宽比率会发生变化。

  contain:容器按背景图的固定比例包含整个背景图。背景图的尺寸以背景图按固定比例放大,其任意一条边到达容器的边界为止,经常会导致另一边空白(有no-repeat时)。

  cover:背景图按固定长宽比放大,至填充满整个容器为止(背景图短一点的那条边也到达容器边界)。有一部分的背景图会因超出容器而被切除。

IE8兼容:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='绝对路径',sizingMethod='scale/crop');

  crop : 背景图大小不变,剪切图片以适应区域尺寸。

  image : 默认值。增大或减小区域的尺寸边界以适应背景图的尺寸,相当于overflow:visible的效果。

  scale : 缩放背景图以适应区域的尺寸边界。

  ①不能指定任意大小background百分比②只适于单张图片不能使用图片精灵等拼图③要引用绝对路径图片④兼容ie7,8

以上皆为个人理解,如有错误之处,欢迎留言指正。

下载本文
显示全文
专题