博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS揭秘之《灵活的背景定位》
阅读量:7103 次
发布时间:2019-06-28

本文共 1772 字,大约阅读时间需要 5 分钟。

针对容器某个角对背景图片做偏移定位

现在就假设想针对容器右下角右侧20px偏移,底部10px偏移
有如下几种方式
1、原理设置透明边框

div {            background: url(../images/code-pirate.svg) no-repeat 100% 100% #58a;            border-right: 20px solid transparent;            border-bottom: 10px solid transparent;        }

2、给background-position指定right bottom值

备注:因为css3中background-position 属性已经得到扩展, 它允许我们指定背景图片距离任
意角的偏移量, 只要我们在偏移量前面指定关键字

div {            background: url(../images/code-pirate.svg) no-repeat #58a;            background-position: right 20px bottom 10px;            /*上面一句写成这样也是同样的效果            background-position: bottom 10px right 20px ;*/        }

3、针对第二种方式实现的回退方案

div {            background: url(../images/code-pirate.svg) no-repeat bottom right #58a;            background-position: right 20px bottom 10px;        }

具体效果见

4、使用padding加background-origin
备注:此方案适用于偏移量与容器的内边距一致,默认情况下background-position 是以 padding box 为准的,所以background-position:top left; top left是以 padding box 的左上角,之所以默认值是padding-box这样边框才不会遮挡背景图片

div {            padding: 10px 20px;            background: url(../images/code-pirate.svg) no-repeat #58a bottom right;            /* 或 100% 100% */            background-origin: content-box;        }

具体效果见

5、使用透明边框加background-origin

div {            padding: 0;            border-right: 20px solid transparent;            border-bottom: 10px solid transparent;            background: url(../images/code-pirate.svg) no-repeat #58a bottom right;            /* 或 100% 100% */            background-origin: padding-box;        }

6、使用calc计算宽高

div {            background: url(../images/code-pirate.svg) no-repeat #58a;            background-position: calc(100% - 20px) calc(100% - 10px);        }

具体效果见

备注:以前只知道calc中的运算符需要两侧各加一个空白符,否则会产生解析错误,现在知道真正的原因是为了向前兼容,在未来,在 calc() 内部可能会允许使用关键字,而这些关键字可能会含连字符(即减号)

转载地址:http://luuhl.baihongyu.com/

你可能感兴趣的文章
Postgres Hooks
查看>>
如何写好一篇技术博客?
查看>>
SQLserver将一张表a的数据插入另一张表b
查看>>
HTTP状态码详解
查看>>
META元标记详解
查看>>
Linux上Aapache 启动不了,报错信息:suEXEC mechanism enabled (wrapper: /usr/sbin/suexec)
查看>>
Ubuntu 16.04 部署自己的私有 Docker Registry
查看>>
python打印详细的异常信息
查看>>
FastDFS+Nginx安装配置笔记
查看>>
Nginx配置文件nginx.conf中文注释
查看>>
20120520 linux下mysql的卸载
查看>>
BIND和DNS名称解析
查看>>
hadoop基本操作命令
查看>>
大型web项目解决方案
查看>>
根据模型大小,限定摄像头旋转角度(上,下,左,右)
查看>>
图文详解 正向代理,反向代理,透明代理
查看>>
haproxy之二
查看>>
tomcat在linux安装
查看>>
我的友情链接
查看>>
19个PHP模板引擎
查看>>