语法

background-origin: padding-box|border-box|content-box;

background-Origin属性指定background-position属性应该是相对位置。

注意如果背景图像background-attachment是"固定"，这个属性没有任何效果。

padding-box 背景图像填充框的相对位置
border-box 背景图像边界框的相对位置
content-box 背景图像的相对位置的内容框 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>图像定位</title>

    <style>

    div{

        border:40px solid rgba(0,233,0,0.4);

        padding: 40px;

        background-image: url("ym.jpg");

        background-repeat: no-repeat;

        /*background-position:left;*/

        background-size:100% 100%;

    }

    .box1{

        background-origin:border-box;

        width:200px;

        height:300px;

    }

    .box2{

        background-origin:content-box;

        width: 200px;

        height: 300px;

    }

    .box3{

        background-origin:padding-box;

        width:200px;

        height:300px;

    }

    p{

        color:gold;

        font-size:20px;

    }

    </style>

</head>

<body>

    <div class="box1">

        <p>background-origin: border-box;背景图像相对于border来定位。

        </p>

    </div>

    <br><br>

    <div class="box2">

        <p>background-origin: content-box;背景图像相对于content来定位。

        </p>

    </div>

    <br><br>

    <div class="box3">

        <p>background-origin: padding-box;背景图像相对于padding来定位。

        </p>

    </div>

</body>

border的定位：

根据content来定位：

根据padding定位：

background-origin背景图片定位的更多相关文章

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

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

  2. CSS常用背景图片定位方法

    CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会 ...

  3. CSS背景图片定位

    原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...

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

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

  5. (转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

    http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中 ...

  6. HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

    CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:bac ...

  7. css背景图片定位练习（二）： background-position的百分比

    background-position:x y; 百分比定位并不能直观的看出来,需要通过计算. background-position百分比计算公式: (容器宽度—背景图片的宽度)*x%=xpx(容器 ...

  8. css背景图片定位练习（一）

    首先准备一张雪碧图,Like this 背景图片的定位方法有3种,比较常用的两种为 关键字:background-position: top left; (top/bottom/cennter/lef ...

  9. CSS中背景图片定位方法

    转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰 日期: 2008年5月 ...

  10. 移动端适配之雪碧图(sprite)背景图片定位

    为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top ...

随机推荐

  1. 针对媒体不实报道误导大众--抹黑C#工资垫底

    最近注意到一些媒体故意抹黑C# 工资垫底,参见 https://www.toutiao.com/i6741889572931633668/: 通过搜索引擎搜索<编程语言薪酬排行:Python薪资 ...

  2. Redis数据库之编程项目及练习资源

    实训项目 :   NOSQL数据库设计与应用实训         注释:   Redis数据库编程项目示例及练习资源 项目源码获取: https://pan.baidu.com/s/19f0F7cmx ...

  3. 探索ASP.NET Core 3.0系列一：新的项目文件、Program.cs和generic host

    前言:在这篇文章中我们来看看ASP.Net Core 3.0应用程序中一些基本的部分—— .csproj项目文件和Program.cs文件.我将会介绍它们从 ASP.NET Core 2.x 中的默认 ...

  4. String 用法 简单API

    明天天梯赛选拔,怕不是STl忘到姥姥家去了,赶紧复习一下 构造str string s = "fuckyouRMA"; string s1(s, 2); de(s1); strin ...

  5. 创建一个自己的Vue UI组件库，并将它发布在npm上

    本文仅限于入门级,没有成规模制作,希望能对你有所帮助. 因为在开发多个项目中可能会用到同一个组件,那么我们通过复制粘贴的形式更新,无异于是笨拙的,我们可以通过上传到npm后,不断迭代npm包来实现更新 ...

  6. Docker详解（四） — Dockerfile剖析

    目录 1.Dockfile简介 2. Dockerfile构建过程解析 3. Dockerfile体系结构 4. 案例 4.1 自定义mycentos 4.2 CMD/ENTRYPOINT 镜像案例 ...

  7. Windows10搭建开发环境----MySQL8.0.17安装

    Windows10 MySQL8解压版最新最全图文安装配置 一.官网下载解压版安装包 MySQL官网 1. 进入官网点击downloads,如图: 2. 翻到网页底部,点击如图位置: 3. 点击MyS ...

  8. 【Oracle】SQL语句优化

    (1) 选择最有效率的表名顺序(只在基于规则的优化器中有效):  ORACLE的解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句中写在最后的表(基础表 driving table)将被最 ...

  9. echarts地图边界数据的实时获取与应用，省市区县多级联动【附最新geoJson文件下载】

    首先,来看下效果图 在线体验地址:https://hxkj.vip/demo/echartsMap/,并提供实时geoJson数据文件下载 echarts官方社区链接地址(可在线编辑):https:/ ...

  10. 游戏服务器和Web服务器的区别

    用Go语言写游戏服务器也有一个多月了,也能够明显的感受到两者的区别.这篇文章就是想具体的聊聊其中的区别.当然,在了解区别之间,我们先简单的了解一下Go语言本身. 1. Go语言的特点 Go语言跟其他的 ...