<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景图片2</title>
<style>
/*.content .part{
width:800px;height:100px;
border: 2px solid black;
background-image:url('images/1.jpg');
background-size: 100% 500%;
}
.content .part1{background-position:0% 0%;}
.content .part2{background-position:0% 25%;}
.content .part3{background-position:0% 50%;}
.content .part4{background-position:0% 75%;}
.content .part5{background-position:0% 100%;}*/
/*.content{font-size: 0;}
.content .part{
width:100px;height:800px;
border: 2px solid black;
background-image:url('images/1.jpg');
background-size: 500% 100%;
display: inline-block;

}
.content .part1{background-position:0% 0%;}
.content .part2{background-position:25% 0%;}
.content .part3{background-position:50% 0%;}
.content .part4{background-position:75% 0%;}
.content .part5{background-position:100% 0%;}*/

.content{font-size: 0;position: relative;}
.content .part{
width:400px;height:400px;
border: 2px solid black;
background-image:url('images/1.jpg');
background-size: 200% 200%;
display: inline-block;

}
.content .part1{background-position:0% 0% ;}
.content .part2{background-position:100% 0%;}
.content .part3{
background-position:0% 100%;
position: absolute;
top: 100%;left: 0;
}
.content .part4{
background-position:100% 100%;
position: absolute;
top: 100%;left: 21.4%;
}

</style>
</head>
<body>
<div class="content">
<div class="part part1"></div>
<div class="part part2"></div>
<div class="part part3"></div>
<div class="part part4"></div>
</div>
</body>
</html>

背景图片利用backgrond-posintion属性实现不同形式的分割的更多相关文章

  1. Pyqt 设置 背景颜色和背景图片、 QPalette 调色板 与QPainter 画板区别 、 不规则图片

    设置 背景颜色和背景图片 首先设置autoFillBackground属性为真然后定义一个QPalette对象设置QPalette对象的背景属性(颜色或图片)最后设置QWidget对象的Palette ...

  2. CSS 背景图像 背景图片定位

    背景图片定位 background-position属性可以给背景图片定位. background-position属性有两个值,第一个值是水平位置,第二个值是垂直位置.这两个值可以使用百分比来表示( ...

  3. css样式背景图片设置缩放

    一.背景颜色图片平铺 background-color 背景颜色 background-image 背景图片地址 background-repeat 是否平铺 默认是平铺 background-pos ...

  4. 【CSS学习笔记】初始化CSS后，写li，并利用背景图片，来完成li小图标的效果，且达到个浏览器兼容

    第一种情况 /*当标题前的图标时单独的一个点儿或者方块或者其他类似图标时,定义背景图background要放在<li>里.    在<li>中设置背景图片的尺寸,地址,不重复, ...

  5. background的属性和背景图片定位的实例

    本文内容: 1.背景图片定位示例 2.background常用的属性值 3.background-repeat新增的round.space属性 4.background-size的属性值(着重介绍co ...

  6. CSS3------background-size（背景图片尺寸属性）

    background-size 可以设置背景图片的大小,数值包括 长度length和百分比percentage. 并且会根据背景原点位置 background-origin 设置其图片覆盖的范围.那么 ...

  7. jQuery获取和设置disabled属性、背景图片路径

    之前对于这个独特的disabled属性获取和设置很混乱,今天项目中用到了,用attr不能实现,于是多次试验得出: 获取disabled属性用prop $("#basic_key") ...

  8. AppCanCSS背景图片的属性

    最近在用AppCan框架技术做跨平台移动应用开发,碰到界面布局设计中图片平铺.拉伸效果. 我们用到的是CSS 3中Background-size属性. 网上查了下这个属性,小记下: 取值: backg ...

  9. CSS背景图片常见属性设置

    在CSS中,图片属性的设置是必不可少的,下面介绍一下常见的图片属性: 1)背景图片插入:background-image:url(位置及名称);  //默认在父级元素内的左上角 2)背景平铺方式:ba ...

随机推荐

  1. 一些Java基础方面问题的总结

    1.Overloaded的方法是否可以改变返回值的类型? 答案:可以. overload是重载,overloaded是什么?重载的过去式?我还以为是我没见过的注解,也没有给限定条件,代码测试一下. p ...

  2. HDU 5616 Jam's balance（Jam的天平）

    HDU 5616 Jam's balance(Jam的天平) Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K ...

  3. 基于create-react-app的打包后文件路径问题

    改绝对路径为相对路径. https://segmentfault.com/q/1010000009672497直接在package.json里加 "homepage":" ...

  4. Vue-admin工作整理（十八）：Mock的使用方法

    # Mock简明文档           ## Mock.mock()           - Mock.mock( requestUrl?, requestType?, template|funct ...

  5. DAY 24继承与组合

    一.继承 继承就是子类与父类形成的一种关系,可以让子类能直接从父类中获取属性与方法 优点:减少了类与类之间的代码冗余 语法: class 父类: # 父类是多个有共同点的普通类抽离共有属性与方法形成的 ...

  6. 在线批量将gps经纬度坐标转换为百度经纬度坐标

    1.首先打开百度api示例页面: 在浏览器地址栏中输入:http://developer.baidu.com/map/jsdemo.htm#a5_3 2.修改代码 如下图,将需要批量转换的坐标,按规则 ...

  7. 8.6 GOF设计模式四: 策略模式… Strategy Pattern

    策略模式… Strategy Pattern  在POS系统中,有时需要实行价格优惠, 该如何处理?  对普通客户或新客户报全价  对老客户统一折扣5%  对大客户统一折扣10%  注:课件 ...

  8. BUAA_OO第二单元作业总结——多线程

    OO第二单元作业总结——多线程 单元任务 本单元主要的内容是通过模拟电梯的运行来熟悉多线程的实现,从简单的单部FAFS电梯开始,ALS电梯,到最后的多部ALS电梯. 一.设计策略分析总结 1.1 多线 ...

  9. java8实战二------lambda表达式和函数式接口，简单就好

    一.Lambda 可以把Lambda表达式理解为简洁地i表示可传递的匿名函数的一种方式:它没有名称,但它有参数列表.函数主体.返回类型,可能还是一个可以抛出的异常列表. 听上去,跟我们用的匿名类,匿名 ...

  10. SAP基础：定位点运算

    先看一下下面简单的代码: REPORT zlytest003. ) VALUE '21.00'. ) . b = a. WRITE b. 运行结果是: 这时候到程序属性页面: 修改固定点算术为空. 保 ...