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%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
随机推荐
- 将svnserve部署为后台服务
由于svnserve运行模式没有部署为后台服务,很容易被人误关掉.于是在网上查了一下,发现也已经有人总结了.Copy过来,以作备忘. 以前的svnserve要想成为windows服务,必须依赖于svn ...
- java中Thread类分析
创建线程的方式有三种,一是创建Thread实例,二是实现Runnable接口,三是实现Callable接口,Runnable接口和Callable接口的区别是一个无返回值,一个有返回值:不管是Runn ...
- Upgrade to or Install Cinnamon 2.4 in Ubuntu
http://www.omgubuntu.co.uk/2014/11/install-cinnamon-2-4-ubuntu-14-04-lts sudo add-apt-repository ppa ...
- saltops 安装及相关环境安装
本次布署测试环境 阿里云 Centos 7.3 1.安装nginx,这里采用yum 安装方式 A.yum install nginx B.创建开机启动 systemctl enable nginx.s ...
- 自定义django的admin后台action
django的admin后台管理系统中自带了一个批量删除所选对象的action. 我们还可以添加自定义的action来实现其它类似的功能,如批量修改某个字段的功能.简单的,例如将文章批量标记为已发布的 ...
- Logback 整合 RabbitMQ 实现统一日志输出
原文地址:Logback 整合 RabbitMQ 实现统一日志输出 博客地址:http://www.extlight.com 一.前言 公司项目做了集群实现请求分流,由于线上或多或少会出现请求失败或系 ...
- Application 应用对象
在整个服务器运行过程中,application对象只有一个 下面的例子是访问次数的统计 <%@ page language="java" contentType=" ...
- BeanUtils Object 取值赋值
/** * 将结果集导出为Excel * * @param response * @param fsc * @param columns * @param bizType * @throws Exce ...
- 关于innodb_thread_concurrency参数 并发控制
http://dev.mysql.com/doc/refman/5.5/en/innodb-parameters.html#sysvar_innodb_thread_concurrency Comma ...
- PHP版本VC6与VC9/VC11/VC14、Thread Safe与None-Thread Safe等的区别
最近正好在弄一个PHP的程序,在这之前一直没有怎么以接触,发现对PHP版本知识了解不是很清楚,自己看了不少类似的文章,还是感觉不够明确和全面, 网上的结论又都是模棱两可,在此,给出最完整甚至武断的解释 ...