9.求背景图片左边到#box盒子左边外框侧的距离
<!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盒子左边外框侧的距离的更多相关文章
- 求背景图片左边到#box盒子左边框外侧的距离
box{ width: 100px; height: 200px; background: pink; padding: 100px; border: 80px solid; background-i ...
- background 背景图片 --css3
background 1.设置背景平铺background-repeat round :图片会进行缩放后平铺space : 图片会进行平铺,中间留下空白空间 注:当滚动行为设为fixed,round和 ...
- 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图
盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...
- 溢出处理、盒子模型、背景图片、float（浮动）
一.overflow:溢出内容的处理 overflow:hidden; 溢出内容隐藏(在父元素内使用,可以清除子元素浮动对父元素的影响) overflow:auto; 自动滚动(有溢出 ...
- 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 ...
- 移动端适配之雪碧图(sprite)背景图片定位
为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top ...
- CSS——精灵图与背景图片定位
精灵图产生背景: 1.网页上的每张图像都需要向服务器发送一次请求才能展现给用户.2.网页上的图像过多时,服务器就会频繁地接受和发送请求,大大降低页面的加载速度.为了有效地减少服务器接受和发送请求的次数 ...
- app引导页(背景图片切换加各个页面动画效果)
前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
随机推荐
- null 与 undefinded
null表示"没有对象",即该处不应该有值.典型用法是: (1) 作为函数的参数,表示该函数的参数不是对象. (2) 作为对象原型链的终点. Object.getPrototype ...
- 最优比率生成树 POJ 2728 迭代或者二分
别人解题报告的链接: http://blog.sina.com.cn/s/blog_691190870101626q.html 说明一下关于精度的问题,当结果是精确到小数点后3为,你自然要把误差定为至 ...
- 【CQOI2008】中位数
题不难,但是思路有意思,这个是我自己想出来的OvO 原题: 给出1~n的一个排列,统计该排列有多少个长度为奇数的连续子序列的中位数是b.中位数是指把所有元素从小到大排列后,位于中间的数. n<= ...
- 【java规则引擎】《Drools7.0.0.Final规则引擎教程》第4章 4.2 auto-focus
转载至:https://blog.csdn.net/wo541075754/article/details/75349556 auto-focus 在agenda-group章节,我们知道想要让Age ...
- ubuntu18.04虚拟机突然不能上网问题解决办法
周末在家啃书学docker,win10上装的虚拟机,ubuntu18.04,突然执行apt-get update报错,域名无法解析,怀疑是dns文件有问题,折腾了很久,各种百度,修改dns文件,仍然报 ...
- Jersey RESTful Web服务
Jersey是一个RESTFUL请求服务JAVA框架,与常规的JAVA编程使用的struts框架类似,它主要用于处理业务逻辑层.与Struts类似,它同样可以和hibernate,spring框架整合 ...
- flash TweenMax用法
二,TweenMax主类: 这里分几个大块来介绍,分别是:第三个参数特有属性(29个),PlugIn(17个),公共属性(10个),公共方法(20个). 1,第三个参数特有属性(29个): 这29个参 ...
- CommonsChunkPlugin知识点
CommonsChunkPlugin 的作用就是提取代码中的公共模块,然后将公共模块打包到一个独立的文件中去,以便在其它的入口和模块中使用. 多个 html共用一个js文件(chunk),可用Comm ...
- 大快搜索DKhadoop集群管理平台添加节点的步骤说明
Hadoop作为搭建大数据处理平台的重要“基石”,关于它的分析和讲解的文章已经有很多了.Hadoop本身是一分布式的系统,因此在安装的时候,需要多每一个节点进行组建的安装.并且由于是开源软件,其安装过 ...
- POSIX 消息队列 之 参数说明
消息队列 一.函数 mq_open 头文件 mqueue.h: 原型 mqd_t mq_open(const char *name, int oflag, .../*mode_t mode,struc ...