background-position和background-size你用对了吗?

原创 小枝节KKW 随笔 CSS 339阅读 2017-05-19 16:57:55 举报

[p]页面中出现图片,设置为背景是再常见不过的了,而且background有好多属性可以调节图片的大小和位置,很方便,其中background-position专用来调整位置,我们都会设置。
看下边的例子[/p]
html 代码

位置的设置有百分比和px(center/left/right不考虑),这两种设置有什么不同呢???
(1)d1的50px 50px比较好理解,就是图片的左上角距离d1上边50px、左边50px的位置,即图片的左上角跟d1中(50,50)的点对齐

background-position和background-size你用对了吗?
(2)d2的50% 50%是哪的50%呢,是图片的左上角距离d2上边50%、左边50%的位置吗?显而易见不是的,图片位于d2的正中间,是图片(50%,50%)的位置跟d2(50%,50%)的位置对齐了

background-position和background-size你用对了吗?
总结一下:
1.background-position
(1)百分比的情况:图片的(50%, 50%)跟div的(50%, 50%)的点对齐, -50%和150%的情况一样,适用于背景图大于div的情况。
(2)值的情况:图片的左上角跟div的(50 50)点对齐,负值一样。
2.background-size(不再举例)
(1)cover:div长边的100% (等比缩放,图片不会变形)
(2)contain:div短边的100% (等比缩放,图片不会变形)
(3)50%:图片的width是div的50%,height为auto(等比缩放,图片不会变形)
(4)50% 50%:图片的width是div的50%,height是div的50% (不等比缩放,图片可能变形)

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复