上海启嘟渡科技商贸有限公司
SEARCH

与我们合作

我们专注提供互联网一站式服务,助力企业品牌宣传多平台多途径导流量。
主营业务:网站建设、移动端微信小程序开发、营销推广、基础网络、品牌形象策划等

您也可通过下列途径与我们取得联系:

微 信: wxyunyingzhe

手 机: 15624122141

邮 箱:

CSS中的postion和cursor特性

更新时间:2025-01-07 22:34:26

postion

background-postion我们常用于元素的定位,而且可以接收好几个值:

1、接收一个值

这个值可以为百分比、数值或者关键字,另一个值一定是center

//单个属性值background-postion:33px;background-postion:center;background-postion:left;background-postion:bottom;background-postion:right;background-postion:top;background-postion:30%;background-postion:right;background-postion:right;//依次等价于background-postion:33pxcenter;background-postion:centercenter;background-postion:leftcenter;background-postion:bottomcenter;background-postion:rightcenter;background-postion:topcenter;background-postion:30%center;background-postion:rightcenter;background-postion:rightcenter;2、接收两个值

两个值都是数值或者百分比值时,第一个值表示水平方向,另一个值表示垂直方向,如果我们把两个值都是为background-position:0%0%,那么就等于这个写法background-position:lefttop;

当两个值都是关键字时,top和bottom表示垂直方向,left和right表示水平方向,所以我们写成background-position:topright和background-position:righttop效果是一样的,但是我们不能写成background-position:rightleft和background-position:topbottom,如果这样写,是无效的。

当两个字一个是数值或百分比值另一个是关键字时,如果数值或百分比值是第一个值,则表示水平方向,第二个值表示垂直方向。如果数值或百分比值是第二个值,就表示垂直方向,那另一个值就表示水平方向,所以如果我们写成background-position:44pxleft是无效的。

3、接收3个值或4个值

数值和百分比值表示的是偏移量,第一个值一定是关键字,用来表示从哪个方向开始偏移的,如果是3个值,则缺少的偏移量为0,所以我们写成background-position:44pxlefttop是无效的。

background-postion接收多个值在浏览器中已经兼容,我们可以用background-position来代替calc()函数,从而去实现左方向或右方向的定位。

cursor

cursor中我们很少用到抓取和缩放效果,cursor:zoom-out用于放大,cursor:zoom-in用于缩小,如果想要在桌面上查看放大或者缩小,加入对应的属性就行。

cursor:grabbing在电脑页面显示的是一个握住的手形,cursor:grab在电脑页面显示的是一个张开的手形,在项目中使用我们可以加入前缀,防止不显示的问题。

如果我们想要在IE中去使用,我们可以加入move属性值。

//用move属性值来代替grab.wrapper{cursor:move;cursor:grab;}

多重随机标签

猜你喜欢文章

QQ客服 电话咨询