1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>求背景图片左边到#box盒子左边外框侧的距离</title>
  6.  
  7.     <style type="text/css">
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.  
  13.         #box{
  14.             width: 100px;
  15.             height: 200px;
  16.             background: pink;
  17.             padding: 100px;
  18.             border: 80px solid blue;
  19.             background-image: url("img/1.png");
  20.             background-repeat: no-repeat;
  21.             background-origin: content-box;/* 背景图片起始源的位置 */
  22.             background-position: -50px 0; /* 左右 上下*/
  23.            /*  background-position 和margin (上下 ； 左右） 等不一样*/
  24.         }
  25.  
  26.         /*答案：130px*/
  27.     </style>
  28. </head>
  29. <body>
  30. <div id="box"></div>
  31. </body>
  32. </html>

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

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

    box{ width: 100px; height: 200px; background: pink; padding: 100px; border: 80px solid; background-i ...

  2. background 背景图片 --css3

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

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

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

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

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

  5. background 的一些 小的细节: 1, 背景色覆盖范围: border+ width+ padding ;背景图覆盖范围: width + padding ; 2设置多个背景图片 ; 3) background-position定位百分比的计算方式: 4)background-clip 和 background-origin 的区别

    1. background (background-color, background-image)  背景色覆盖范围: border+ width+ padding ;背景图覆盖范围: width ...

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

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

  7. CSS——精灵图与背景图片定位

    精灵图产生背景: 1.网页上的每张图像都需要向服务器发送一次请求才能展现给用户.2.网页上的图像过多时,服务器就会频繁地接受和发送请求,大大降低页面的加载速度.为了有效地减少服务器接受和发送请求的次数 ...

  8. app引导页(背景图片切换加各个页面动画效果)

    前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...

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

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

随机推荐

  1. Spring如何解析XML文件——Spring源码之XML初解析

    首先,在我的这篇博客中已经说到容器是怎么初步实现的,并且要使用XmlBeanDefinitionReader对象对Xml文件进行解析,那么Xml文件是如何进行解析的,将在这片博客中进行一些陈述. 数据 ...

  2. 微信小程序开发过程中出现问题及解答

    1.wx.uploadFile上传图片,控制台抛出错误"uploadFile:fail Error:Hostname/IP doesn't match certificate's altna ...

  3. 关于self和super在oc中的疑惑与分析 (self= [super init])

    这个问题貌似很初级,但很容易让人忽略,me too .直到在一次面试时被问到,稀里糊涂的回答了下.实在惭愧, 面试一定都是很注重 基础的,不管高级还是初级. 虽然基础好跟基础不好都可以写代码,网上那么 ...

  4. 2018-2019-2 网络对抗技术 20165212 Exp4 恶意代码分析

    2018-2019-2 网络对抗技术 20165212 Exp4 恶意代码分析 原理与实践说明 1.实践目标 监控你自己系统的运行状态,看有没有可疑的程序在运行. 分析一个恶意软件,就分析Exp2或E ...

  5. 【java规则引擎】《Drools7.0.0.Final规则引擎教程》第4章 4.2 agenda-group

    转载:https://blog.csdn.net/wo541075754/article/details/75332720 agenda-group 规则的调用与执行是通过StatelessKieSe ...

  6. leetcode:Single Number【Python版】

    1.用双重循环逐个遍历(超时) 2.用list B的append和remove函数(超时) 3.用dict B(AC) class Solution: # @param A, a list of in ...

  7. 一个不错的nomad raw_exec && docker 运行例子（集成访问网关）

    github 上有一个关于nomad up && runing 不错的项目,包含了一个tomcat 应用的部署,以及基于容器运行的网关服务 项目参考地址 https://github. ...

  8. linux 的dmesg命令

    dmesg命令参考博客 http://www.linuxso.com/command/dmesg.html dmesg用来显示内核环缓冲区(kernel-ring buffer)内容,内核将各种消息存 ...

  9. TensorFlow笔记-07-神经网络优化-学习率,滑动平均

    TensorFlow笔记-07-神经网络优化-学习率,滑动平均 学习率 学习率 learning_rate: 表示了每次参数更新的幅度大小.学习率过大,会导致待优化的参数在最小值附近波动,不收敛:学习 ...

  10. JSP指令include和JSP动作元素include的区别

    include指令用于在JSP页面静态的包含一个文件,该文件可以是JSP页面.HTML页面.文本文件或者一段java代码.使用include指令的JSP页面在转换时,JSP容器会在其中插入所包含文件的 ...