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. js 页面跳转 新窗口打开

    页面跳转:Window.showModalDialog(url,width,height); 弹出一个html文档的模式对话框Parent.window.document.location.href ...

  2. matlab直接运行fig文件时报错

    Matlab里面所的程序都是以.m的脚本文件形式保存的,所有运行的都是m文件.所以,对于guide生成的GUI程序,打开的方式有两种: 一:打开.m文件,点击m文件上的运行按钮,会自动弹出figure ...

  3. 从Linux传输apk包到Windows系统，一周的心路历程，累

    1.在Windows服务器上打开一个cmd窗口,执行脚本,只适用于Windows系统 --NO String cmd = "cmd.exe /c adb -s f223413 install ...

  4. Mybatis基于XML配置SQL映射器(一)

    Durid和Mybatis开发环境搭建 SpringBoot搭建基于Spring+SpringMvc+Mybatis的REST服务(http://www.cnblogs.com/nbfujx/p/76 ...

  5. SCP-bzoj-1084

    项目编号:bzoj-1084 项目等级:Safe 项目描述: 戳这里 特殊收容措施: 分类讨论+DP.#滑稽 预处理前缀和s[i][s]=Σa[j][s](∀j∈[1,i])(m=1时略去第二维) 对 ...

  6. 网站运行一段时间后就无法访问，重启Tomcat才能恢复

    网站运行一段时间后就无法访问,重启Tomcat才能恢复出现这种情况,很可能是以下几种情况:1.超过数据库连接池上限2.并发数达到上限3.内存溢出具体还是需要通过打印的日志进行具体分析.解决方法1.如果 ...

  7. vuedraggable 实现拖动数据改变

    // 引入组件 import Draggable from 'vuedraggable' // 使用组件 DragList 为自己封装好的组件 注意一定要使用vue的sync <DragList ...

  8. SQL语句之-函数

    六.函数 1.文本处理函数 2.日期和时间处理函数 MySQL数据库:SELECT * FROM orders WHERE YEAR(order_date)=2012  七.汇总数据 1.AVG()函 ...

  9. [CSP-S模拟测试ex]题解

    爆零了.少特判见祖宗.还好这场不计入总分. 考场上什么都没想.感觉考试状态又回到了两个月前. A.Antipalindrome 手玩样例,不难发现题目中要求的合法串的充要条件是:对于任意$i \in ...

  10. OpenResty 技术图谱skill-map

    # OpenResty 技术图谱## basic concepts- HTTP- RESTful API & API GateWay- Microservice- Domain Specifi ...