background-position:top left（关键字）、0px 0px（数值）、0% 0%（百分数）

最新推荐文章于 2023-03-09 20:13:35 发布
最新推荐文章于 2023-03-09 20:13:35 发布
阅读量2.3k 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q285661571/article/details/7535434
版权
第一个对应水平方向 ，第二个对应垂直方向
q285661571
关注
专栏目录
CSS background-position的使用说明详解
12-08
在`background-position`中，可以使用长度单位（如像素`px`，百分比`%`等）或者关键词（如`top`，`center`，`bottom`，`left`，`right`）来定义位置。关键词`left`和`right`代表水平方向，`top`，`center`和`bottom`...
CSS中背景图片的background-position中的left top到底是相对于谁的？
weixin_30432007的博客
07-31 190
在学习的时候遇到了如下问题： CSS中背景图片的background-position中的left top到底是相对于谁的，content-box?padding-box?border-box? background属性中的backgound-image和background-color相对的box是一致的吗？ 如何做到背景图片位于容器的右边10px,底边10px？ ...
理解 background-position
cloud_guo的博客
12-28 587
background-position 基础认识background-position 是css 中定义背景图片位置的一个属性，接受三种类型的值。 关键字：top right bottom left center px 、em 、rem % 百分比 项目中经常用到的值可以参考下图： 如果提供两个，第一个用于横坐标，第二个用于纵坐标。 如果只提供一个，该值将用于横坐标；纵坐标将默认为50%（即ce
CSS 之 background 系列属性详解
weixin_45092437的博客
03-09 3万+
背景系列属性，共包含9种属性：background-color：设置元素的背景颜色。background-image：设置元素的背景图片。background-size：设置元素背景图片的大小。background-position：设置元素背景图片的位置。background-repeat：设置背景图片是否重复，以及如何重复。background-clip：设置元素背景的渲染区域。background-origin：设置元素背景的定位区域。background-attachment：设置元素的背景图片是否
background 背景属性详解
会敲代码的男老师的博客
02-03 3891
background 背景属性 我们知道元素有前景色color，与之对应的还有背景色，通过background我们可以为元素添加实色（background-color）和任意多个背景图片（background-image）。 css 背景常见属性 background-color background-position background-size background-repeat background-origin background-clip background-attachm
CSS之background-position属性
tian361zyc的博客
06-22 3324
css
.new_ul { border-radius: 0 0 8px 8px; position: relative; &:hover { &::before { content: ''; position: absolute; z-index: 3; left: 0; bottom: 0; background-color: #2280fb; width: 100%; height: 100%; } } li { position: relative; z-index: 4; } &::before { content: ''; position: absolute; z-index: 3; left: 0; bottom: 0; background-color: #2280fb; width: 0%; height: 0%; } }给这段代码添加贼牛逼的动画
05-28
border-radius: 0 0 8px 8px; position: relative; &::before { content: ''; position: absolute; z-index: 3; left: 0; bottom: 0; background-color: #2280fb; width: 0%; height: 0%; transition: ...
body{ background-color: steelblue; } .bigbox{ width: 1500px; height: 1200px; position: absolute; top: 780px; left: 10%; } /*轮播图*/ a{ text-decoration: none; } .rb{ position: relative; width: 1500px; height: 750px; border: 1px solid black; top: 780px; overflow: hidden; left: -5%; } .rb img{ position: relative; margin-top:-22px ; width: 1500px; height: 800px; bottom: 0; left: 0; right: 0; top: 0; } #imageroll div{ bottom: 0; overflow: hidden; position: absolute; float: left; } #imageroll div a{ background-color: #999; color: #fff; display: block; float: left; height: 30px; margin-right: 1px; overflow: hidden; padding: 5px 15px; text-align: center; width: 269px; } #imageroll div a em{ position: relative; cursor: pointer; display: block; height: auto; overflow: hidden; width: auto; } #imageroll .last{ position: relative; margin: 0; width: 80px; } #imageroll a.chos{ position: relative; background-color: #37c; color: #fff; }怎么改为响应式布局
06-13
1. 将 .bigbox 的宽度改为百分比，例如改为 width: 90%; 2. 将 .rb 的宽度和高度改为百分比，例如改为 width: 100%; height: 50%; 3. 将 .rb img 的宽度和高度也改为百分比，例如改为 width: 100%; height: 100%; ...
background-position:怎么设置
最新发布
03-16
background-position属性用于设置背景图像的起始位置。它可以接受一个或两个值来指定水平和垂直方向上的位置。 在设置background-position时，可以使用以下方式： 1. 使用关键字：可以使用关键字来指定背景图像的...
记录background-position的使用方法
qq_28992047的博客
09-06 240
记录background-position的使用方法
background-position的使用方法
m0_37675885的博客
01-16 4075
这是在学习了阮一峰先生的博客后写的一篇解释笔记，附上原链接《CSS中背景图片的定位方法》 CSS中的背景图片定位方法有三种： 1. 关键字定位：background-position：top left； 2. 像素定位：background-position：x px  y px； 3. 百分比定位：background-position：x% y%； 其中，1、2都是将背景图左
CSS学习：关于background-position
zgqtxwd的专栏
04-30 408
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
css详解background八大属性及其含义
前端学习笔记
04-18 2941
background（背景） 以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由 元素外边距（margin）、元素边框（border）、元素内边距（padding）和元素内容（content） 4部分组成，不过这只是从2D的视角来看盒模型的组成，而今天笔者将阐述如何从3D的视角看待盒模型的组成。 从2D视角看盒模型示意图： 从3D视角看盒模型示意图： background-color（背景颜色） 背景颜色是背景中最常用的属性，它支持的值类型有： 颜色名称，比如 red, white
position:absolute 按钮左右分布：left:0 和 right:0 以及雪碧图
weixin_30709929的博客
07-12 618
问题：把两个a标签按钮 垂直居中，并且分别把两个按钮放在水平左右两边顶部1，祖父元素设定：position:relative2，把.arrow 设定上下垂直居中 position:absolute; top:50%; margin-top:-20px;3，因为父级元素已经进行垂直居中定位，所以，只要把 a 标签进行左右定位即可　　　a标签公共样式.item{ position:absolute...
background-position 用法详细介绍
热门推荐
JeamKing的专栏
05-22 12万+
语法：background-position : length || length background-position : position || position 取值：length  : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位  position  : top | center | bottom | left | center |
CSS3基础：background背景
qq_54517101的博客
08-03 354
图片的位置，可以写top center left right buttom 等 顺序可以乱，但是如果要写精确位置，必须按照 x方向,y方向顺序写，例如12px 24px，表示图片距离左边边界12px，距离上面边界24px。插入的图片是否重复堆叠 ，可以是no-repeat repeat repeat-x repeat-y。滚动页面时，图片是否固定。scroll(滚动) fixed(固定)第四个数字处在（0，1）之间设置透明度。...
CSS background-position属性
Caroline的博客
06-08 1万+
background-position可以用于设置背景图像的位置。主要有以下三类：1、关键字：    center、top、left、bottom、right。如果只写了一个值，那么第二个值默认为center。比如 background-position:top;和background-position:top center;是等价的。2、百分比：    background-position:x...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值