CSS揭秘之《灵活的背景定位》

googollee 发布于2019-08-20 19:08 / 1399人阅读

摘要：针对容器某个角对背景图片做偏移定位现在就假设想针对容器右下角右侧偏移，底部偏移有如下几种方式原理设置透明边框给指定值备注因为中属性已经得到扩展，它允许我们指定背景图片距离任意角的偏移量，只要我们在偏移量前面指定关键字上面一

针对容器某个角对背景图片做偏移定位
现在就假设想针对容器右下角右侧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() 内部可能会允许使用关键字，而这些关键字可能会含连字符（即减号）

云服务器 GPU云服务器最灵活的编程语言灵活迁移灵活性阿里云灵活性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85205.html

CSS揭秘之《灵活的背景定位》

摘要：针对容器某个角对背景图片做偏移定位现在就假设想针对容器右下角右侧偏移，底部偏移有如下几种方式原理设置透明边框给指定值备注因为中属性已经得到扩展，它允许我们指定背景图片距离任意角的偏移量，只要我们在偏移量前面指定关键字上面一针对容器某个角对背景图片做偏移定位现在就假设想针对容器右下角右侧20px偏移，底部10px偏移有如下几种方式1、原理设置透明边框 div { ...

RyanQ 2019-08-29 13:20 评论0 收藏0
css-secrets (css揭秘) 知识点目录，值得深入学习！

摘要：通过模糊来弱化背景和滚动提示使用两层背景，控制交互式的图片对比控件范围输入控件方式书中有很详细的解答提醒自己要回顾。 1. 第一章 css编码技巧第二章边框与背景半透明边框 hsla 多重边框 box-shadow outline 灵活的背景定位 background-position css3该属性可以指定偏移量，////bac...

DevWiki 2019-08-30 15:56 评论0 收藏0
《CSS揭秘》-背景与边框

摘要：给一个容器设置一层白色背景和一道半透明白色边框。思路实际是设置的背景会延伸到边框所在的区域的下层，可以通过属性调整背景的默认行为。优点边框样式十分灵活。缺点只适用于双层边框的场景边框不一定会贴合属性产生的圆角。 1.给一个容器设置一层白色背景和一道半透明白色边框。思路：实际是设置的背景会延伸到边框所在的区域的下层，可以通过background-clip属性调整背景的默认行为。 bac...

tangr206 2019-08-30 15:55 评论0 收藏0
CSS揭秘之《背景图案》

摘要：网格具体效果见链接波点可以用如下代码来实现但如果我想实现如下效果而非上面那样中规中矩其实原理是一样的具体效果见链接需要注意的是第二层背景的偏移定位值必须是贴片宽高的一半棋盘用以上两者中的任网格 html { background: #58a; background-image: linear-gradient(white...

Hwg 2019-08-20 19:08 评论0 收藏0