`
lmh2072005
  • 浏览: 113821 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

background-position百分比

    博客分类:
  • css
阅读更多

 

 

平常习惯于使用描述性的left、top、center、right、bottom或者px等对背景图片定位,百分比比较少用。

其实描述性的也可以用百分比来表示。

比如背景图片水平垂直居中可以用background-position:center center; 或 background-positon:50% 50%;

百分比值是以背景图的中心点到容器左上点的距离百分比

一般用background-position: 50% 10px; 而不用background-position: center 10px;

因为类似这种描述性词语和数值混用的形式不被W3C推荐。

百分比进行定位比描述性词语定位更灵活

(单纯的描述性词语组合使用是没有问题的,例如:background-position: right bottom;)

 

只给出一个属性值而不是一对,那么它只作用于水平方向,且垂直方向默认为“50%”

 

 

 

分享到:
评论

相关推荐

    批量输出 CSS background-position 属性的定位像素值

    2. **转换单位**:检查每个`background-position`值,如果是以百分比或关键词表示的,将其转换为像素值。这可能需要根据元素的尺寸来计算。 3. **生成新CSS**:创建一个新的CSS文件,将转换后的`background-position...

    background-position 的学习.zip

    在CSS世界中,`background-position`是一个至关重要的属性,它允许我们精确地控制背景图像在元素内的位置。这个属性在网页设计中广泛应用,用于创建各种视觉效果,如图像滑动、定位图标等。本篇文章将深入探讨`...

    CSS中背景图片定位方法:background-position的用法

    首先,`background-position`属性可以接受多种值类型,包括关键词、百分比和像素值。这些值通常以两个分隔开的参数形式出现,分别代表水平方向和垂直方向的偏移量。例如: 1. 关键词:`left`、`center`、`right`、`...

    关于背景图片的定位(background-position)

    `background-size`可以设置为`cover`或`contain`,或者像`background-position`一样使用百分比和像素值。 总结来说,`background-position`是一个强大的CSS属性,它让我们能够灵活地控制背景图片在元素中的位置,...

    css 之 background-position-x

    background-position-x 属性的取值可以是长度单位(如 px、em、cm 等)、百分数或者关键字(如 left、center、right 等)。当取值为长度单位时,表示背景图片左上角相对于元素左上角的水平距离。当取值为百分数时,...

    CSS background-position的使用说明详解

    可以使用长度单位或百分比来设置background-position的值。长度单位可以是像素(px)、em单位等。百分比值是相对于背景定位区域(即元素的内容区域)的百分比来计算的。此外,还可以使用预定义的值,如top、center、...

    CSS background-position 属性 定位图片

    CSS background-position 属性定位图片 在 CSS 中,background-position 属性是设置背景图像的起始位置的属性。今天,我们来讨论这个属性的定义、用法和效果。 定义 background-position 属性设置背景图像的起始...

    CSS背景background、background-position使用详解

    主要的背景属性包括`background-color`、`background-image`、`background-position`、`background-repeat`和`background-attachment`,这些属性可以通过合并使用缩写属性`background`来一次性设定。 1. **背景颜色...

    CSS中背景background-position负值定位深入理解[图文]

    在CSS中,`background-position`属性用于控制背景图像在元素内的定位。这个属性可以接受一到两个值,分别代表水平和垂直方向上的偏移量。这些值可以是百分比、像素或其他长度单位,甚至可以是负值。在讨论负值定位时...

    background-position鱼游动特效特效代码

    通常,这个属性可以设置为百分比或像素值,例如`background-position: 0% 0%;`表示图像的左上角对齐。 接下来,`animation`属性是CSS3中的一个强大工具,它可以创建复杂的动态效果。在这个鱼游动特效中,我们可能...

    利用CSS定位背景图片 background-position

    标题“利用CSS定位背景图片background-position”指出的是如何通过CSS属性来控制背景图片的定位问题。以下内容将详细阐述如何使用CSS中的background-position属性来精确控制背景图片的显示位置,以及相关的知识点。 ...

    css取背景位css取背景位css取背景位

    在CSS(层叠样式表)中,背景位(background-position)是一个非常重要的属性,用于设置元素背景图像的位置。它允许开发者精确控制背景图片在元素内的显示位置,从而实现各种设计效果,比如背景图像的平铺、居中、...

    css3背景图片指定显示位置

    - 你可以混合使用像素和百分比,例如`background-position: left 20%;`表示背景图片的左侧与元素的左侧对齐,而图片的顶部距离元素顶部20%的位置。 4. **多背景图片的定位**: - 在CSS3中,可以使用逗号分隔多个...

    背景图片定位

    这里的`x-position`和`y-position`可以是具体的像素值、百分比、关键词(如`center`)等。例如,以下代码将背景图片居中: ```css background-position: center center; ``` 更复杂的情况下,我们可能需要使用相对...

    background-postion定位与图片结合实现圆角效果

    在网页设计中,`background-position` 是一个非常重要的CSS属性,用于控制背景图像在元素内的显示位置。这个属性允许开发者精确地定位背景图像,从而实现各种视觉效果,比如本文提到的利用背景定位来创建圆角效果。...

Global site tag (gtag.js) - Google Analytics