灵活的背景定位

最新推荐文章于 2024-08-23 15:53:59 发布

码农六六

最新推荐文章于 2024-08-23 15:53:59 发布

阅读量213

点赞数 1

分类专栏： html+css3 文章标签： html 前端

本文链接：https://blog.csdn.net/six6de6/article/details/125888149

版权

html+css3 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

举个例子来说：

如果想让背景图片跟右边边距保持20px的偏移量，同时跟底边保持10px,的偏移量。

图片示例

代码段：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css多重边框</title>
    <style>
div{
width: 500px;
height: 500px;
background: url(./img/5.jpg) no-repeat #58a;
background-position: right 20px bottom 10px;
}
    </style>
</head>
<body>
  <div>
content box
  </div>
</body>
</html>

最后一步我们还需要一个适合的回退方案，如果遇到不支持background-position扩展语法的浏览器，背景图片就会贴在左上角，(背景图片的默认位置)，

方案：把老套的bottom right定位值写进background的简写属性中：

div{
width: 500px;
height: 500px;
background: url(./img/5.jpg) no-repeat right bottom #58a;
background-position: right 20px bottom 10px;
}

Background-origin方案:

在给背景图片设置距离某个角的偏移量时，有一种情况极为常见：偏移量与容器的内边距一致。

图例：

代码段：

div{
width: 500px;
height: 500px;
padding:10px
background: url(./img/5.jpg) no-repeat #58a;
background-position: right 20px bottom 10px;
}

虽然代码起了作用，但是每次改动内边距，我们都需要在三个地方更新这个值！

解决方法

你可知道每个元素身上都存在三个矩形边框border-box(边框的外沿边距)，padding-box(内边距的外沿边距)，content-box(内容区的外沿边距),而background-positon：left top 指定那个的左上角？

默认情况下是指padding-box，但是我们可以用bacground-origin个属性指定。再配合background-positon巧妙使用，

例如：我们设定bacground-origin的值为content-box，那么属性中使用的边角关键字将会以内容区的边缘作为准基，也就是说此时背景图片距离边角的偏移量就跟内边距保持一致了

视图：

代码段

div{
width: 500px;
height: 500px;
padding:20px;
background:url(./img/5.jpg) no-repeat #58a top left;
background-origin: content-box;
}

如果想让偏移量与内边距稍有不同就可以配合background-positon使用

视图：

代码段

div{
width: 500px;
height: 500px;
padding:20px;
background:url(./img/5.jpg) no-repeat #58a left top ;
background-origin: content-box;
background-position: 30px 10px ;
}

calc( )方案：

calc( )是以左上角来偏移,例如我们希望它有一个100% - 20px的水平偏移量，以及100% - 20px的垂直偏移量，calc( )函数允许我们执行此类运算，需要配合background-positon使用

实现效果：

代码段：

div{
width: 500px;
height: 500px;
background:url(./img/5.jpg) no-repeat #58a;
background-position: calc(100% - 20px) calc(100% - 20px) ;
}

码农六六

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
灵活的背景定位

图片定位解析！
复制链接

扫一扫

专栏目录