css学习笔记3--灵活的背景定位

(1) background-position方案

我们可以利用这一属性指定背景图片距离任意角的偏移量。

    div {width: 30em;height: 15em;background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat right bottom #5378d4;background-position: right 50px bottom 15px;}
复制代码

(2) background-origin方案

默认情况下，background-position 是以padding box 为准的，这样边框才不会遮住背景图片。因此，top left 默认指的是padding box 的左上角。

而属性background-origin能够改变这种行为，它的值有三种：border-box/padding-box/content-box。默认情况下，它的值是padding-box。我们使用content-box就可以实现想要的效果了。

盒模型如图：

div {width: 30em;height: 15em;background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat right bottom #5378d4;background-origin: content-box;padding: 20px;}
复制代码

实现的效果同方案（1）

(3) calc()方案

   div {width: 30em;height: 15em;background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat right bottom #5378d4;background-position: calc(100% - 20px) calc(100% - 10px);}
复制代码

注意：calc()函数内部的运算符两侧要加上一个空白符。

转载于:https://juejin.im/post/5c6ce96d6fb9a049e063eb2b

css学习笔记3--灵活的背景定位相关推荐

Web前端开发之CSS学习笔记3—颜色和背景
目录 1.CSS的颜色表达 1.1前景色color 1.2背景色background-color 2.背景 2.1 background-image:url()设置背景图; 2.2 backgroun ...
CSS学习笔记 04、浮动与定位
文章目录前言一.浮动 1.1.1.浮动的基本概念 1.1.2.浮动的顺序贴靠特性 1.1.3.右浮动效果 1.1.4.案例:使用浮动设计网页布局(分析及源码) 1.1.5.BFC规范与浏览器差异 ...
CSS学习笔记-07-字体与背景
文章目录 7.字体与背景 7.1.图标字体(iconfont) 7.2.行高 7.3.文本样式 7.4.背景 7.5.雪碧图的使用 7.6.线性渐变 7.7.径向渐变 7.字体与背景 7.1.图标字体 ...
CSS学习笔记——精灵图(sprite)
CSS学习笔记目录一.什么是精灵图? 二.精灵图的优点三.精灵图的基本用法 1.打开ps导入精灵图 2.测量字母的大小及坐标 3.效果图 4.代码实现总结一.什么是精灵图? 所谓精灵图就是图片 ...
CSS学习笔记（详细，不定期更新）
CSS 学习笔记 CSS书写规范顺序布局位置属性(position, top, right, z-index, display, float等) 自身大小盒子模型(width, height, p ...
CSS学习笔记（狂神-完整版）
CSS学习笔记(狂神-完整版) HTML + CSS + JavaScript 结构 + 表现 + 动作 1.什么是CSS 如何学习 CSS是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) ...
css中怎么加入立体模型,CSS学习笔记二：css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
CSS学习笔记（详细）- 基础
CSS学习笔记从零开始代码风格样式书写格式 CSS基础选择器 css选择器的作用:(选择标签用的) 选择器分类:基础选择器和复合选择器基础选择器标签选择器类选择器 - 开发最常用多类名 i ...
前端篇--------1.css学习笔记
1.css 单行文本换行溢出解决方案(css三件套) white-space:nowrap overflow:hidden text-overflow:ellipsis 2.css m ...

css学习笔记3--灵活的背景定位

css学习笔记3--灵活的背景定位相关推荐

最新文章

热门文章