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%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
随机推荐
- 八皇后 递归or迭代
递归: #include <iostream> #include <cstdlib> #include <cstdio> using namespace std; ...
- LG2023 [AHOI2009]维护序列
题意 老师交给小可可一个维护数列的任务,现在小可可希望你来帮他完成. 有长为N的数列,不妨设为a1,a2,-,aN .有如下三种操作形式: (1)把数列中的一段数全部乘一个值; (2)把数列中的一段数 ...
- 用C#通过反射实现动态调用WebService 告别Web引用（转载）
我们都知道,调用WebService可以在工程中对WebService地址进行WEB引用,但是这确实很不方便.我想能够利用配置文件灵活调用WebService.如何实现呢? 用C#通过反射实现动态调用 ...
- seleniumWebdriver浏览器驱动信息汇总
selenium是thoughtworks公司开发的一款开源的测试工具,主要用来做web端的自动化测试. Python安装selenium,直接使用执行pip install selenium(pyt ...
- 在服务端处理同步发送小消息的性能上Kafka>RocketMQ>RabbitMQ
在发送小消息的场景中,三个消息中间件的表现区分明显: Kafka的吞吐量高达17.3w/s,远超其他两个产品.这主要取决于它的队列模式保证了写磁盘的过程是线性IO.此时broker磁盘IO已达瓶颈. ...
- linux 命令：chmod权限设置命令
Linux系统中的每个文件和目录都有访问许可权限,用它来确定谁可以通过何种方式对文件和目录进行访问和操作. 文件或目录的访问权限分为只读,只写和可执行三种.以文件为例,只读权限表示只允许读其内容,而禁 ...
- 一个spring boot集成dubbo的小例子
请移步github,介绍和代码均在上面了:https://github.com/wuxun1997/voicebox 这里再多说两句.github上的这个小例子默认使用组播作为注册中心,你也可以把组播 ...
- C# OracleBulkCopy 批量插入oracle数据库的方法
只有安装了oracle 11G客户端的机器上才可以用,要用到ODP.NET组件中的oracleDataAccess.DLL,命名空间引用为Oracle.DataAccess.Client; 引用:Or ...
- 在Windows下安装Linux
使用工具:EasyBCD,该工具支持xp/win7. 安装EasyBCD后新建一个grub启动项: 将Linux ISO文件复制到一个干净的fat分区: 将ISO中的isolinux和images目录 ...
- spring boot学习(4) SpringBoot 之Spring Data Jpa 支持（1）
第一节:Spring Data Jpa 简介 Spring-Data-Jpa JPA(Java Persistence API)定义了一系列对象持久化的标准,目前实现这一规范的产品有Hibernate ...