box{

width: 100px;
height: 200px;
background: pink;
padding: 100px;
border: 80px solid;
background-image: url("img/1.png"); //默认 background-origin: padding-box; 背景图将覆盖到padding
background-repeat: no-repeat;
background-origin: content-box; // 改变 background-origin后，背景图将不再覆盖padding
background-position: -50px 0;
}

故： 80+100-50 = 130 px

求背景图片左边到#box盒子左边框外侧的距离的更多相关文章

  1. 9.求背景图片左边到#box盒子左边外框侧的距离

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. background 背景图片 --css3

    background 1.设置背景平铺background-repeat round :图片会进行缩放后平铺space : 图片会进行平铺,中间留下空白空间 注:当滚动行为设为fixed,round和 ...

  3. 溢出处理、盒子模型、背景图片、float（浮动）

    一.overflow:溢出内容的处理     overflow:hidden;  溢出内容隐藏(在父元素内使用,可以清除子元素浮动对父元素的影响)    overflow:auto; 自动滚动(有溢出 ...

  4. 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图

    盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...

  5. 移动端适配之雪碧图(sprite)背景图片定位

    为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top ...

  6. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  7. background的属性和背景图片定位的实例

    本文内容: 1.背景图片定位示例 2.background常用的属性值 3.background-repeat新增的round.space属性 4.background-size的属性值(着重介绍co ...

  8. css背景图片位置：background的position

    position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的 1.background:url(../image/header.jpg) no-re ...

  9. 从零开始学 Web 之 CSS（三）链接伪类、背景、行高、盒子模型、浮动

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

随机推荐

  1. UVA - 11624 J - Fire! （BFS）

    题目传送门 J - Fire! Joe works in a maze. Unfortunately, portions of the maze have caught on fire, and the ...

  2. Java-技术专区-如何监控Java线程池的状态

    线程池介绍 什么是线程池.线程池核心类.线程池工作流程.线程池分类.拒绝策略.及如何提交与关闭线程池等. 但在实际开发过程中,在线程池使用过程中可能会遇到各方面的故障,如线程池阻塞,无法提交新任务等. ...

  3. .net core 部署到IIS 以及上 HTTP Error 502.5 - ANCM Out-Of-Process Startup Failure

    安装AspNetCoreModule托管模块后执行 1.net stop was /y 2.net start w3svc 测试可以,但是需要装对应的托管模块的版本. 1. .NET Core与Win ...

  4. number框

    因为系统的number框无法设置样式,所以休息无聊时写了一个简单的模拟number框的插件,效果不是很完善,有一些功能可能没注意到 // 简单的模拟number框插件 // 布局: // <di ...

  5. Sql Server Management Studio 18 打开闪退问题

    解决方案 找到MSSMS安装位置,例如我是安装到了D:\Program Files (x86)\Microsoft SQL Server Management Studio 18 将D:\Progra ...

  6. mysql百万级别重排主键id（网上的删除重建id在大数据量下会出错）

    网上教程: 先删除旧的主键 再新建主键 :数据量少时没问题,不会出现主键自增空缺间隔的情况(如:1,2,3,5):但是大数据量时会出现如上所述问题(可能是内部mysql多进程或多线程同时操作引起问题) ...

  7. 关于Django路由层简单笔记

    Django—路由层 URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表:你就是以这种方式告诉Django,对于客户端发来的某个U ...

  8. C#驱动mysql明明数值不为空却一直说DBNull.Value的诡异情况

    最近遇见了一个很诡异的情况,就是当我们关联表查询时,副表如果有bit类型的字段的话,C#驱动读取该列时就会抛出“DBNull.Value不能转换为其他类型”的异常,但是我们如果拿出sql语句单独查询的 ...

  9. zabbix自带database monitor

    1. 在zabbix服务器上安装一下两个包: # yum -y install unixODBC mysql-connector-odbc 2. 修改zabbix服务器上ODBC配置: 2.1 Vim ...

  10. Debug和Release区别(转)

    地址:https://zhidao.baidu.com/question/629188090208609884.html 最近写代码过程中,发现 Debug 下运行正常,Release 下就会出现问题 ...