<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>求背景图片左边到#box盒子左边外框侧的距离</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        #box{

            width: 100px;

            height: 200px;

            background: pink;

            padding: 100px;

            border: 80px solid blue;

            background-image: url("img/1.png");

            background-repeat: no-repeat;

            background-origin: content-box;/* 背景图片起始源的位置 */

            background-position: -50px 0; /* 左右 上下*/

           /*  background-position 和margin (上下 ； 左右） 等不一样*/

        }

        /*答案：130px*/

    </style>

</head>

<body>

<div id="box"></div>

</body>

</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. LOJ2540. 「PKUWC2018」随机算法【概率期望DP+状压DP】

    LINK 思路 首先在加入几个点之后所有的点都只有三种状态 一个是在独立集中,一个是和独立集联通,还有一个是没有被访问过 然后前两个状态是可以压缩起来的 因为我们只需要记录下当前独立集大小和是否被访问 ...

  2. PyCharm首次使用（Hell world!）

    作为PyCharm编辑器的起步,我们理所当然的先写一个Hello word,并运行它.(此文献给对IDE不熟悉的初学者) 1,新建一个项目 File --> New Project... 2,新 ...

  3. MySQL Disk--NAND Flash原理

    ====================================================== NAND Flash最小存储单元: 写数据操作: 通过对控制闸(Control Gate) ...

  4. Cocos2d-X数据、动作、消息的基本操作

    加入类的create方法: CREATE_FUNC(ClassName) 使用这个宏能够为类加入一个create方法. 创建类的对象时一律用Class::create()的形式. 在CREATE_FU ...

  5. 作为一名IT从业者，你在工作和学习中，遇到哪些问题

    版权声明:襄阳雷哥的版权声明 https://blog.csdn.net/FansUnion/article/details/28448975 大家都是IT从业者,遇到的问题多少与类似. 假设能把这些 ...

  6. baidu手机浏览器安卓4.5版公布：由于快，所以爱

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxNDUyMzk4OA==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  7. SpringMVC请求参数注解两个小问题

    今天遇到使用SpringMVC请求注解遇到的两个小问题: 如果用@requestBody注解,则请求体内容类型一般要为application/json,如果其类型为multipart/form-dat ...

  8. JUC集合之 LinkedBlockingQueue

    LinkedBlockingQueue介绍 LinkedBlockingQueue是一个单向链表实现的阻塞队列.该队列按 FIFO(先进先出)排序元素,新元素插入到队列的尾部,并且队列获取操作会获得位 ...

  9. 转 Fiddler导出jmeter脚本

    前提条件:                1.下载安装抓包工具Fiddler                2.下载Fiddler插件,参考下载地址:http://download.csdn.net/ ...

  10. Windows 7 With Sp1 简体中文旗舰版

    Windows 7 With Sp1 简体中文旗舰版(MSDN官方原版) 安装Windows 7对于硬件配置的基本要求: •1 GHz 32 位或 64 位处理器 •1 GB 内存(基于32 位)或 ...