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. kubernetes容器集群自签TLS证书

    集群部署 1.环境规划 2.安装docker 3.自签TLS证书 4.部署Flannel网络 5.部署Etcd集群 6.创建Node节点kubeconfig文件 7.获取K8S二进制包 8.运行Mas ...

  2. webpack + vue 打包生成公共配置文件（域名） 方便动态修改

    需求原因 原来的项目中域名是打包到项目里面的,打包后不能动态配置,只能通过不同的指令打包来切换域名,每天都在测试域名和正式域名来回摩擦,后台大佬说你们可以生成一个配置文件这样就不用频繁打包了直接修改配 ...

  3. sql查询静态数据

    select * from ( ,,,'高中')) AS Education ( EducationId,EducationName )

  4. log4j.xml配置详解(转)

    转自:http://willow-na.iteye.com/blog/347340 Xml代码 <?xml version="1.0" encoding="UTF- ...

  5. Redis面试题大全含答案

    Redis面试题大全含答案 Redis面试题大全含答案 1.什么是Redis?答:Remote Dictionary Server(Redis)是一个开源的使用ANSI C语言编写.支持网络.可基于内 ...

  6. foobar2000 频谱给我的win10 任务栏添加一点会动背景

    在任务栏右键,"任务栏设置",颜色 -> 透明效果, 然后 foobar2000 的 view -> layout -> Quick Setup,选择带有Visu ...

  7. github 配置ssh

    https://www.cnblogs.com/superGG1990/p/6844952.html

  8. Java中JDBC连接池&JDBCTemplate

    数据库连接池 概念:其实就是一个容器(集合),存放数据库连接的容器. 当系统初始化好后,容器被创建,容器中会申请一些连接对象,当用户来访问数据库时,从容器中获取连接对象,用户访问完之后,会将连接对象归 ...

  9. src/lib/framework/src/driverFramework.cpp学习

    int Framework::initialize() { DF_LOG_DEBUG("Framework::initialize"); g_framework = new Syn ...

  10. Windows最值得安装的小众软件

    用电脑这么久,也琢磨出自己的一些使用心得.今天和大家分享几个Windows效率工具.数量不多,但每个都是精品. ▌软件下载-卫星公众好「悦享软件」,在后台会话框中回复关键字:h108 1.Ditto ...