- 综合排序
- 最热优先
- 最新优先
- 来自专栏用户2442861的专栏
background-position 用法详细介绍
1、background-position:0 0; 背景图片的左上角将与容器元素的左上角对齐。 该设置与background-position:left top;或者background-position:0% 0%;设置的效果是一致的。 图 4 5、background-position:50% 50%; 图片水平和垂直居中。与 background-position:center center;效果等同。 6、background-position:-50% -50%; 等同于x：-{容器(container)的宽度—背景图片的宽度}*x百分比，超出的部分隐藏。 图 6 7、background-position:100% 100%; 图片处于容器元素的右下角，与 background-position:right bottom;效果等同。
1.1K10发布于 2018-09-19 - 来自专栏友儿
background-position定位图片
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>background-position定位图片</ "); background-repeat: no-repeat; background-attachment: fixed; background-position background-repeat: no-repeat; /*background-color: lightgoldenrodyellow;*/ background-position
44630编辑于 2022-09-11 - 来自专栏技术综合
CSS背景定位属性——background-position
要是你像下面这么写，那就挂了…… background-position: bottom 0; 2. 单个值 background-position取单个值时，另一个值默认设为center。 例如： background-position: top; 相当于： background-position: top center; /* 或者 */ background-position: center 例如： background-position: 10px; 相当于： background-position: 10px center; /* 横轴方向距离元素左侧10px，纵轴方向居中 */ 三、百分数值 background-position: 10% 50% 这是一个100px*100px的盒子，里面有张50px*50px的背景图，这个背景图就设置background-position: 10% 50% : 10px 10%; background-position: right 10px bottom; background-position: right 10% bottom 10px; 重点总结
2.9K20编辑于 2022-07-08 - 来自专栏地方网络工作室的专栏
jQury animate操作 background-position 方法
今天遇到一个奇怪的问题，在使用jQury animate操作background-position的时候，怎么都不成功，在换成了css方法之后就成功了。问题是，css方法是没有动画效果的。 CSDN上找到一篇文章：http://blog.csdn.net/goodshot/article/details/8648706，其中说到，animate操作的CSS参数是包括background-position
52740编辑于 2022-11-28 - 来自专栏前端自习课
【CSS】220-你可能理解错了background-position
文本主要解决如何理解背景定位（background-position）属性的。 文章虽短，但是内容足够拨乱反正。 为了方便理解 background-position，这让背景图片不平铺。 background-repeat: no-repeat; 效果如图所示： ? 接下来我们设置图片位置： background-position: right bottom; 产生如下效果： ? 重点来了，right bottom 这个值是什么意思呢？ 估计大部分人都理解错了。 background-position: 100% 100%; 设置如上样式，会产生同样的效果。
64530发布于 2019-07-23 - 来自专栏用户7873631的专栏
详解：42 background-position 记住，是左右上下的顺序的哈
1px solid red; background-image:url(images/king1.jpg); background-repeat: no-repeat; } .box1{ background-position : right bottom; } .box2{ background-position: right 50px bottom 100px; } .box3{ background-position
37820发布于 2020-10-28 - 来自专栏杰的记事本
css背景图background-position百分比的理解
如果偏移没有相应的关键字，则会被认为是center, 因此，background-position:top center可以直接写作background-position:top。 例如： background-position: right 40px bottom 20px; ? 哇哦，IE9都支持，应该可以愉快地使用了吧！抱歉，我要泼点冷水。 百分比单位 background-position中的百分比单位是个很有意思的东西。其表现与CSS中其他的百分比单位表现都不一样。 这就是为何background-position:100% 100%是定位在容器右下角的原因。 那<position>值对应的容器坐标位置该如何计算呢？ background-position: -50% -50%; object-position: -50% -50% ?
1.7K30发布于 2019-09-04 - 来自专栏韩曙亮的移动开发专栏
【CSS】CSS 背景设置 ④ ( 超大背景图片设置 | 背景图片定位设置 background-position: center top； )
则只能看到图片背景的左上角 ; 如果电脑分辨率很大 , 则大图片背景显示在屏幕的左上角 ; 3、超大背景图片推荐定位方式 因此这里要设置图片背景的位置 , 一般超大背景图片的背景定位都使用 background-position background-image: url(images/background1.jpg); background-repeat: no-repeat; /* 超大图片背景位置 */ background-position
2.6K20编辑于 2023-03-30 - 来自专栏小狐狸说事
7b2美化-首页添加动态北极熊搜索样式
:0 0}100%{background-position:-25em 0}}@-moz-keyframes bear-run{0%{background-position:0 0}100%{background-position }2.77777778%{background-position:-6.25em 0;left:-.5%}4.16666667%{background-position:-9.375em 0;left: :4.75%}8.33333333%{background-position:-18.75em 0;left:6.5%}9.72222222%{background-position:-21.875em 0;left:8.25%}11.11111111%{background-position:-25em 0;left:10%}11.11111111%{background-position:0 0; 0;left:13%}16.11111111%{background-position:-9.375em 0;left:14.5%}17.77777778%{background-position:-
92030编辑于 2022-11-16 - 来自专栏三十课
用CSS新属性实现特殊的图片显示效果
SCSS代码 .pencil-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position SCSS代码 .watercolor-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position : cover; } &:before { background-image: $url, $url; background-blend-mode: difference; background-position ) grayscale(1); box-shadow: inset 0 0 0 1px black; } &:after { background-image: $url; background-position SCSS代码 .emboss-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position
1.4K00发布于 2019-09-19 - 来自专栏韩曙亮的移动开发专栏
【CSS】CSS 背景设置 ② ( 背景位置 | 背景位置-方位值设置 )
: length length background-position : position position background-position 属性值 可以是 length 长度 , 也可以是 属性值使用注意事项 : 设置背景图片 : 设置 background-position 属性值 之前 需要先设置 background-image 背景图片属性 ; 方位设置 : 如果设置 position : right top;*/ /* 设置背景位置 - 左下角 */ /*background-position: left bottom;*/ /* 设置背景位置 - 水平居中 垂直居中 */ /*background-position: center center;*/ /* 设置背景位置 - 左下角 两个值前后顺序无关 */ /*background-position : bottom left; */ /* 设置背景位置 - 指定一个值 另一个默认居中 */ /*background-position: top;*/ } </style> <
5.5K20编辑于 2023-03-30 - 来自专栏html5期末大作业
情人节程序员用HTML网页表白【生日快乐动画】HTML+CSS+JavaScript HTML5七夕情人节表白网页源码
background-position: -602px -0px } 50% { background-position: -302px -291px } 75% { background-position { background-position: -0px -291px } 25% { background-position: -602px -0px } 50% { background-position { background-position: -904px -0px } 50% { background-position: -451px -0px } 75% { background-position { 0% { background-position: -453px -0px } 25% { background-position: -904px -0px } 50% { background-position: -451px -0px } 75% { background-position: -753px -0px } 100% { background-position
79340编辑于 2022-08-21 - 来自专栏从零开始学 Web 前端
两分钟搞定博客园自定义样式
} to{ background-position: 600% 0; } } @-moz-keyframes cc { from{ background-position } @keyframes cc { 0%{ background-position: 0 0; } 100%{ background-position background-position: 0 600%; } } @-webkit-keyframes da { 0%{ background-position: 0 0 ; } 100%{ background-position: 0 600%; } } @-moz-keyframes da { 0%{ background-position background-position: 0 0; } 100%{ background-position: 0 600%; } } 然后在 页首Html代码中添加
1.2K80发布于 2019-07-08 - 来自专栏我分享我快乐
网页设计师面试题与答案2
:-23px -25px} .squareB{background-position:-222px -25px} .squareA:hover{background-position:-123px -25px } .squareB:hover{background-position:-321px -25px} </style> <body>
Problem 1
<a href="#" class :-23px -25px} .A1{background-position:-123px -25px} .B0{background-position:-222px -25px} .B1{background-position :-23px -204px} .c1{background-position:-104px -204px} .c2{background-position:-185px -204px} .c3{background-position :-266px -204px} .c4{background-position:-347px -204px} .c5{background-position:-428px -204px} </style61960发布于 2018-05-02 - 来自专栏前端壹栈
你不知道 CSS 可以做的 4 件事
我们可以将小人跑动的动作分解，拼成下面的雪碧图： 通过设置不同的background-position设置不同时间小人不通的动作 @keyframes run { 0% { background-position : 0 0 } 10%{ background-position: -100% 0 } 20%{ background-position: -200% 0 } 30% { background-position: -300% 0 } 40%{ background-position: -400% 0 } 50%{ background-position : 0 -100% } 60%{ background-position: -100% -100% } 70%{ background-position: -200% - 100% } 80%{ background-position: -300% -100% } 90%{ background-position: -400% -100%
1.8K10发布于 2021-09-17 - 来自专栏码神路漫漫
如何破解自如的反爬机制
span> <span style="<em>background-position</em> css设置<em>background-position</em>设置图片移位显示不同的数字。 :0px": 1, "background-position:-30px": 7, "background-position:-60px": 4, "background-position :-90px": 3, "background-position:-120px": 5, "background-position:-150px": 9, "background-position :-180px": 8, "background-position:-210px": 0, "background-position:-240px": 2, "background-position
1.4K10发布于 2019-07-31 - 来自专栏河湾欢儿的专栏
简易的星级评分
; var index=null; $("li").hover(function(){ $(this).css("background-position ","0 -28px").nextAll("li").css("background-position","0 0"); $(this).prevAll().css("background-position ","0 -28px").nextAll("li").css("background-position","0 0"); $("li").eq(index).prevAll ().css("background-position","0 -28px"); $("span").html(a[$(this).index()]);//填充相应的文字 ","0 -28px").nextAll("li").css("background-position","0 0"); $(this).prevAll().css("background-position
1.4K20发布于 2018-09-06 - 来自专栏生南星
vue项目简书(一)
:0 0;} 14.2% {background-position:0 0;} 14.2001% {background-position:0 16%;} 28.4% {background-position :0 16%;} 28.4001% {background-position:0 33%;} 42.6% {background-position:0 33%;} 42.6001% {background-position:0 50%;} 56.8% {background-position:0 50%;} 56.8001% {background-position :0 67%;} 71% {background-position:0 67%;} 71.0001% {background-position:0 84%;} 85.2% {background-position :0 84%;} 85.2001% {background-position:0 100%;} 100% {background-position:0 100%;} } @keyframes
1.1K30发布于 2019-07-22 - 来自专栏html5期末大作业
情人节程序员用HTML网页表白【满天星星音乐背景动画特效】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
background-position: 600% 0; }}@-moz-keyframes cc { from{ background-position: 0 0; 0%{ background-position: 0 0; } 100%{ background-position: 600% 0; }}@keyframes da { 0%{ background-position: 0 0; } 100%{ background-position: 0 600%; }} @-webkit-keyframes da { 0%{ background-position: 0 0; } 100%{ background-position : 0 600%; }}@-ms-keyframes da { 0%{ background-position: 0 0; } 100%{ background-position
94340编辑于 2022-08-20 - 来自专栏授客的专栏
CSS 从大图中选取部分区域作为目标图标
3、总结 载入背景图片，根据需要设置展示区宽度和高度，及背景图片的位置，让其目标图片内容“恰好落在”展示区，其中主要是利用了background-position的一些特性，图解如下 ? ? 说明： background-position：0 0 背景图片的左上角和所在容器左上角对齐，超出的部分隐藏。 等同于 background-position: left top、background-position:0% 0% background-position: 100% 100% 背景图片的右下角和所在容器的右下角对齐 background-position: 20 18x;。 背景图片从所在容器左上角的地方向右移20px，向下移18px，超出的部分隐藏。 background-position: -20 -18x;。 背景图片从所在容器左上角的地方向左移-20px，向上移-18px，超出的部分隐藏。
1.4K30发布于 2019-08-21
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号