<!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. 论文笔记：SiamRPN++: Evolution of Siamese Visual Tracking with Very Deep Networks

    SiamRPN++: Evolution of Siamese Visual Tracking with Very Deep Networks 2019-04-02 12:44:36 Paper:ht ...

  2. （转）The Evolved Transformer - Enhancing Transformer with Neural Architecture Search

    The Evolved Transformer - Enhancing Transformer with Neural Architecture Search 2019-03-26 19:14:33 ...

  3. Maven pom详解

    POM全称是Project Object Model,即项目对象模型.pom.xml是maven的项目描述文件,以xml的 形式描述项目的信息,包括项目名称.版本.项目id.项目的依赖关系.编译环境. ...

  4. 15_Raid及mdadm命令 _LVM

    磁盘管理:     机械式硬盘:     U盘,光盘,软盘,硬件,磁带 ln [ -s -v ] SRC DEST 硬链接:     1.只能对文件创建,不能应用于目录     2.不能跨文件系统   ...

  5. ssm+redis整合(通过aop自定义注解方式)

    此方案借助aop自定义注解来创建redis缓存机制. 1.创建自定义注解类 package com.tp.soft.common.util; import java.lang.annotation.E ...

  6. React-native完整配置流程

    开头敲黑板!! 无论你是RN的新手还是老手,跟着流程走,RN项目搭建起来完全不是问题!   一.网址收集 expo配置网址:https://blog.expo.io/building-a-react- ...

  7. Git Learning3 Eclipse Tools（未完成）

    1.创建Git 操作:工程 右键 Team Share Project Git 完成创建 2.全局设置:Window->Preference->Git->Configuration- ...

  8. 亚马逊VE账号运营

    VE劲爆内幕大揭秘!“仿牌+Amazon VE”跟卖之路 Amazon Vendor Express 是Amazon.com2015年下旬推出的新的供应商平台,商家通过这个平台可以把产品卖给Amazo ...

  9. ArcSDE10.1配置Oracle 监听器来使用SQL操作ST_Geometry(个人改动版)

    发了两天的时间来解决配置Oracle 监听器来使用SQL操作ST_Geometry的配置,网上搜索一大片,结果真正找到的只有方法可用,下面把这个方法我个人在总结下. ArcSDE10.1配置Oracl ...

  10. 8.4 GOF设计模式三: 外观模式 Facade

    GOF设计模式三: 外观模式 Facade  “现有系统”功能强大.复杂,开发“新系统”需要用到其中一部分,但又要增加一部 分新功能,该怎么办?4.1 Facade Pattern: Key Fea ...