background-position的向右对齐用法

最新推荐文章于 2022-10-24 10:24:16 发布
最新推荐文章于 2022-10-24 10:24:16 发布
阅读量6.7k 收藏
点赞数 2
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_34197758/article/details/69258219
版权
一直只知道background-position: （x轴位置） （y轴位置），如果靠近左边偏移7px就写成background-position: 7px   20px;这样的，但是像右要怎么办？以前我是傻傻的给父容器计算了宽度，然后就向左偏移固定的宽度再见，然后才发现原来可以写成这样background-position: right  7px center;代表在右边偏移7px;不过这个属于css3的范围，所以兼容性会有点小小问题，ie9和Android 4.4才支持，不介意就可以用~
小小笔记
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
背景文字或者背景图片右对齐
orichisonic的专栏
10-15 2729
.demo,.demo2{width:300px;height:100px;background:#EEE; position:relative;margin:5px; } .demo h1{position:absolute;right:10px;top:10px;} .demo2{background:#EEE url("http://static.blueidea.com/
background-position用法
最新发布
2301_78986604的博客
06-27 382
你可以使用像素(px)、点(pt)、em等长度单位来精确指定背景图像的位置。正值会将背景图像向右或向下移动，而负值会将背景图像向左或向上移动。注意，如果你同时提供了两个值，第一个值控制水平位置（左右），第二个值控制垂直位置（上下）。默认值为： 0% 0%。等同于x：-{容器(container)的宽度—背景图片的宽度}*x百分比，超出的部分隐藏。等同于y：-{容器(container)的高度—背景图片的高度}*y百分比，超出的部分隐藏。
background-position 详解
weixin_30354675的博客
01-19 374
一、语法 语法：background-position：x, y; 定义：背景图片相对容器原点的起始位置； 取值： 关键字：top | center | bottom | left | center | right 百分比：百分数 具体值：px、rem、em等确值 默认值为：0% 0%（即坐标原点） 二、定位原理 ...
[转]通过css控制背景图片位置-back…
PandaraWen 宝盒
11-05 746
原文：http://www.liloy.info/archives/446.html 最近经常给div在加背景图片的时候，发现背景图片的位置总是跟自己想要的效果不一样，所以就粗略的研究了一下，把结果和过程跟大家一起分享一下。现在就用div来举例子，其他的容器也都一样。主要来介绍一下背景background的几个属性。 我们给一个div加上背景后，先仅仅控制背景图片的路径，其他的都不做控制。这时
background 距离右边固定距离
weixin_34040079的博客
04-18 1062
先说一下background-position的表现： 当使用关键字的时候，关键字的顺序是无关的，即：background-position: center top和background-postion: top center是等价的 当使用百分比或者具体的长度单位时，是先x方向，后y方向，顺序不能错，即：background-position: 10...
css background-position 用法详细图文介绍
09-25
`，则背景图片会相对于元素的左上角向右偏移70像素，向下偏移40像素。 5. 当设置为 `background-position: 50% 50%;` 或 `background-position: center center;`，背景图像将水平和垂直居中。这意味着图片的中心点...
CSS background-position的使用说明详解
12-08
` - 图像从元素的左上角向右移动500px，向下移动15px。 4. `background-position: -500px -15px;` - 图像从元素的左上角向左移动500px，向上移动15px。 5. `background-position: 50% 50%;` - 图像居中显示，这...
CSS中背景background-position负值定位深入理解[图文]
09-25
为了更好地理解这一点，我们可以想象元素的内容区域为一个坐标轴，其中左上角是原点(0,0)，向右和向下是正方向，而向左和向上是负方向。因此，`-50px -50px;`表示图像向左上角移动，使得图像的左上角与元素内容区域...
background-position 的学习.zip
06-11
本篇文章将深入探讨`background-position`的工作原理、语法以及常见用法。 `background-position`属性的基本语法是： ```css background-position: x-position y-position; ``` 这里的x-position和y-position可以是...
CSS中background-position使用技巧
weixin_33827965的博客
06-07 416
一.background-position:left top; 　　背景图片的左上角和容器(container)的左上角对齐，超出的部分隐藏。等同于 background-position:0,0;也等同于background-position:0%,0%; 二.background-position:right bottom; 　　背景图片的右下角和容器(container)的右下角对齐，...
css3之背景定位
weixin_30807779的博客
10-15 144
属性: background-position: left top || left bottom || right top || right bottom || center center || 像素值 || 百分比 实例： 代码： 1.设置background-position:left top 代表背景图片要放在内容区的左上角的位置（默认值） 2. 设置ba...
background-position:center right这里center right分别代表什么,引入对图片背景定位介绍
mituan1234567的专栏
03-09 1885
http://www.divcss5.com/wenji/w496.shtml background-position:center right这里center right分别代表什么,引入对图片背景定位介绍 background-position是用于定位背景图片中对象中显示定位，比如图片作为背景时在对象内什么位置开始显示，显示样式等。比如让一个图片作为对象背景距离对象左边或右边
CSS3背景定位
CH_Y的博客
10-24 2155
针对某个容器的某个角落，使用了background-position和使用calc()函数对背景图片进行偏移定位，解决了CSS3背景定位问题。
background-position 用法详细介绍
热门推荐
JeamKing的专栏
05-22 12万+
语法：background-position : length || length background-position : position || position 取值：length  : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位  position  : top | center | bottom | left | center |
background-position属性生效，背景却没有移动
Bcxbclj的博客
10-24 1245
css样式中有个background-position背景属性，是关于对背景在对象中的精准定位。 1. background-position: 水平方位 垂直方位（right left top bottom center） 2. background-position-x: 水平方向移动 3. background-position-y:垂直方向移动 4. 结合一起来，一个容器里正方向上就有9...
CSS背景background详解，background-position详解
会敲代码的男老师的博客
02-03 3万+
背景(background)是css中一个重要的的部分，也是需要知道的css的基础知识之一。这篇文章将会涉及css背景(background)的基本用法，包括诸如 background-attachment 等的属性，也会介绍一些有关背景(background)的常用技巧，以及 css3 中的 背景(background)(包含4个新的背景(background)属性)。 css2 中的背景(background) 概述 CSS2 中有5个主要的背景(background)属性，它们是： * ba
css3 背景位置,CSS3中背景图片位置background-position的用法介绍
weixin_27427397的博客
08-03 1135
本篇文章给大家分享的是css3中background-position的用法，有需要的朋友可以参考一下。在css3之前设置background-position，你可以从元素的左上角设置位置。例如：div{background-position:20px 40px;/*20px from left & 20px from top*/}问题是无法从另一个点确定确切的位置，例如从底部/右边，我...
[转]background-image属性研究
jjjsss82的专栏
07-01 586
http://blog.sina.com.cn/s/blog_4a0eab070100d8pk.html 在设置background-image属性时，经常会遇到一个background-position ;一直不怎么会用,今天有空研究下.版本：CSS1　 兼容性：IE6 7+ FF+　继承性：无 语法：background-position : length || lengt
background-position右向左偏移
05-10
如果你想将背景图像从右向左偏移，可以使用 background-position 属性。可以设置两个值，第一个值表示水平方向的偏移量，第二个值表示垂直方向的偏移量。在这种情况下，将第一个值设置为负数即可实现从右向左偏移。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值