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. java虚拟机规范(se8)——class文件格式(四)

    4.7 属性 属性用于class文件格式中的ClassFile,field_info,method_info和Code_attribute结构. 所有的属性都是下面的格式: attribute_inf ...

  2. 重读ORB_SLAM之Tracking线程难点

    1. 初始化 当获取第一帧图像与深度图后,首先设置第一帧位姿为4*4单位矩阵,然后为整个map添加关键帧与地图点.且更新地图点与关键帧的联系,例如地图点被哪个关键帧观测到,而此关键帧又包含哪些地图点. ...

  3. js与html中unicode编码的使用

    js中 // unicode在字符串中使用格式:\u四位编码,一定是四位,否则报错 // 显示 @ 符 console.log(`十六进制 unicode 编码 0x0040 对应的字符是:${'\u ...

  4. 2019-3-1-win10-uwp-使用-LayoutTransformer

    title author date CreateTime categories win10 uwp 使用 LayoutTransformer lindexi 2019-03-01 09:24:32 + ...

  5. 高逼格企业级MySQL数据库备份方案，原来是这样....

    很多人,这里说的是运维工程师们,一提到写某某方案,很是头疼.不是上某度一统搜索,就是同样一句话在N个群全部群发一遍:“有没有某某方案,可以共享一下的吗??求助,各位大佬们”,估计十有八九,全部石沉大海 ...

  6. React全栈-社交网络程序 提交表单数据

    1. 给每个input 表格添加change 事件 当input  变化时触发 <div className="form-group"> <input type= ...

  7. React 滚动事件

    代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UT ...

  8. poj 1144 割点模板题

    题目大意: 求割点: 基本思路: tarjan算法,套板子 代码如下: #include<iostream> #include<string> #include<vect ...

  9. css3 序列帧动画抖动

    页面需要一个动画,设计师给了动画的序列帧 项目由vue构建,使用css3做动画 html <div class="work_two_main"></div> ...

  10. Vue项目中使用Vux

    最近想用vue+vux写一个项目,于是到vux的官网看了文档开始着手搭建项目,但是遇到一些坑.下面简单说下安装vux 的过程.默认已安装vue环境1.安装vux npm install vux --s ...