background-position x/y的取值为啥是负值

原創 gzyzwx 2019-04-18 02:36

1、可以这样理解

background-position的元素的左上角为顶点（0，0），xy正方向是朝右朝下的，元素左上角要回到容器左上角，这个时候，整个背景图需要向上和向左偏移，则x和y都是负值，这个时候，整个背景图中，你想要展示的图案，就会往左上移动，所以说使用background-position的值都是负值。

图例

 图中的图案，就是元素；

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

怎样让div中的字上下左右居中

<div style="height: 30px;line-height: 30px;text-align: center;"> 讓我居中 </div>使line-height和height一樣就能讓字上下居中

shaochengand 2020-07-08 11:56:57

TOMCAT下配置项目路径

對工程的部署一般是將工程的壓縮文件放在tomcat安裝目錄的webapps下，訪問時通過鍵入：http://localhost:8080/xx(假定爲本機訪問，xx是部署時的應用工程的訪問名字）。 而如果直接鍵入：http://loca

shaochengand 2020-07-08 11:56:57

HTML+CSS+JS实现小学四则运算自动出题程序

HTML+CSS+JS實現小學四則運算自動出題程序 要求 編寫一個小學四則運算自動出題程序 要求： 1、100以內四則運算，題目自動生成； 2、頁面需要有計算結果輸入框，提交按鈕； 3、用戶提交結果之後系統能自動計算成績； 4、系

马踏飞燕&lin_li 2020-07-08 11:54:31

JS 实现拖拽效果

JS 實現拖拽效果 拖拽原理 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/

马踏飞燕&lin_li 2020-07-08 11:54:29

详解Flex布局

Flex佈局 flex 佈局是繼 標準流佈局 、 浮動佈局 、 定位佈局 後的第四種佈局方式。這種方式可以非常優雅的實現子元素居中或 均勻分佈，甚至可以隨着窗口縮放自動適應。 flex 佈局在瀏覽器中存在一定的兼容性。但是在小程序

马踏飞燕&lin_li 2020-07-08 11:54:29

HTML + CSS + JS 实现随机抽奖

HTML + CSS + JS 實現隨機抽獎 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="view

马踏飞燕&lin_li 2020-07-08 11:54:28

Flex布局实战：支付宝首页

Flex佈局實戰：支付寶首頁 index.wxml <view class="container"> <!-- 藍色部分 --> <view class="blue-group"> <!-- 頂部部分 --> <vie

马踏飞燕&lin_li 2020-07-08 11:54:28

Axios--基础知识

下載使用方式： npm: $ npm install axios cdn: <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 案例（GET以及POST請求

GQ_cyan 2020-07-08 11:50:38

HTML5入门之常用标签

html5標準網頁聲明 <!DOCTYPE html> 必要結構 <html > <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>

blackcatkiller 2020-07-08 10:51:12

[转]css父元素背景覆盖其子元素背景， 正常一般是子元素的背景会覆盖父元素的背景

原文：https://www.cnblogs.com/zouqin/p/5498495.html 問題： 怎麼實現 父元素的背景覆蓋子元素的背景呢？   ———————————————————————————— <!DOCTYPE htm

牛頓的小腦 2020-11-17 13:54:11

html+css 选项卡

  <style type=text/css>td {   font-size: 12px;  color: #000000;  line-heig

bluelazyboy 2020-07-08 12:23:28

position:absolute下，top:0,right:0,bottom:0,left:0 结合margin:auto的作用（让明确宽高的盒子水平垂直居中于父元素）

絕對定位 + margin，讓明確寬高的盒子水平垂直居中於窗口 <!DOCTYPE> <html> <head> <meta charset="UTF-8"> <meta name="vie

ddx2019 2020-07-08 11:55:42

css每日一报（自己积累平时写法）

1、pc端共用的樣式： *{padding:0px;margin:0px;outline:0 none; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-s

空手走-web 2020-07-08 11:54:55

vue开发的手机购物商城APP东京大药房(带数据库，定位，支付，等)

源碼下載就能上線,需要的注注,私信,

qq_36824777 2020-07-08 11:50:38

原生JS实现树状结构列表

樹狀結構列表，這個技術點之前有寫過了，是基於vue講解，但似乎都沒有解決痛點，最基礎的原生JS該怎麼實現呢？ 這篇文章會全面詳細的介紹樹狀結構列表的實現，從數據處理成樹狀結構，到動態生成dom節點渲染頁面。  確定原始數據結構  原始數據

wendZzz 2020-07-08 11:27:37