background-position的意思及用法

最新推荐文章于 2021-12-09 23:21:31 发布
最新推荐文章于 2021-12-09 23:21:31 发布
阅读量2.3k 收藏 6
点赞数 3
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46582421/article/details/105650219
版权

在CSS3中，background-repeat 属性设置是否复及如何重复背景图像。

1、制background-repeat:repeat 是默认属性，百使背景图像在水平和度垂直方向上重复知。
在这里插入图片描述
2、background-repeat:repeat-x 背景图像将在水平方向重复。
在这里插入图片描述
3、background-repeat:repeat-y 背景图像将在垂直方向重复。
在这里插入图片描述
4、background-repeat:no-repeat 背景图像将仅显示一次。

5、background-repeat:inherit 规定应该从父元素继承 background-repeat 属性的道设置。
在这里插入图片描述

前端程序员路易
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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
CSS中background-position使用技巧
weixin_33827965的博客
06-07 409
一.background-position:left top; 　　背景图片的左上角和容器(container)的左上角对齐，超出的部分隐藏。等同于 background-position:0,0;也等同于background-position:0%,0%; 二.background-position:right bottom; 　　背景图片的右下角和容器(container)的右下角对齐，...
详解background-position
祥哥的说
05-02 1万+
你真的了解background-positionbackground属性是CSS中最常见的属性之一，它是一个简写属性，其包含background-color、background-image、background-repeat、background-attachment、background-position、background-clip、background-origin和background...
CSS之background-position 用法详细介绍
chuoshenpi2512的博客
06-28 566
background-position 用法详细介绍 语法： background-position : length || length background-position : position || position 取值： length : 百分数 | 由浮点数...
background-position 详解
weixin_30354675的博客
01-19 370
一、语法 语法：background-position：x, y; 定义：背景图片相对容器原点的起始位置； 取值： 关键字：top | center | bottom | left | center | right 百分比：百分数 具体值：px、rem、em等确值 默认值为：0% 0%（即坐标原点） 二、定位原理 ...
css background-position 用法详细图文介绍
09-25
在前端开发中，熟练掌握 `background-position` 的用法对于创建美观且功能丰富的用户界面至关重要。 语法上，`background-position` 接受两个值，可以是长度（length）、百分比或者是预定义的位置关键词（如 `top`,...
CSS background-position的使用说明详解
12-08
以下是`background-position`的一些典型用法： 1. `background-position: left top;` 或 `background-position: 0% 0%;` - 图像的左上角与元素内容区域的左上角对齐。 2. `background-position: right bottom;` 或...
CSS背景background、background-position使用详解
01-19
这篇文章将会涉及css背景(background)的基本用法，包括诸如 background-attachment 等的属性，也会介绍一些有关背景(background)的常用技巧，以及 css3 中的 背景(background)(包含4个新的背景(background)属性)。...
CSS background-position 属性 定位图片
09-25
background-position 属性也可以使用关键字，如 left、right、center、top、bottom 等。例如，background-position: left top;，表示背景图片的水平位置在左侧，垂直位置在顶部。 实例 下面是一个使用 background-...
background-position 用法详细介绍
热门推荐
JeamKing的专栏
05-22 12万+
语法：background-position : length || length background-position : position || position 取值：length  : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位  position  : top | center | bottom | left | center |
background-position: -192px -48px;//图片定位详解
weixin_34326179的博客
06-26 308
2019独角兽企业重金招聘Python工程师标准>>> ...
CSS从大图中抠取小图完整教程(background-position应用)
weixin_33888907的博客
06-01 420
       相信很多喜欢研究网页界面的童鞋都遇到过一个奇妙的现象：网页中很多图片素材被合成在一张图片上。        起初小菜模仿网站的时候，经常遇到这个现象，那时候也不知道这时什么技术，人家的整张图片素材不会利用，只能用ps切图，切成单个的再用。。。        其实，这是一个非常简单的技术，就是因为想象的太难了，才一直找不到问题的关键。        要想实现CSS抠图，只需要用到...
css中background-position属性
aibai666的博客
12-09 1万+
background-position属性在css中用来设置背景图片的位置，它通过设置水平方向和垂直方向的取值来到达效果 background-position的常见三种定义方式 1.关键字取值 通过使用关键字来定义图片的位置。其中 水平方向的关键字有left(左) center(中) right(右) 垂直方向的关键字有top(上) center(中) bottom(下) 使用方法，一般情况下先定义水平方向的关键字 然后定义垂直方向的关键字 background-posi...
background-position的使用方法
m0_37675885的博客
01-16 4045
这是在学习了阮一峰先生的博客后写的一篇解释笔记，附上原链接《CSS中背景图片的定位方法》 CSS中的背景图片定位方法有三种： 1. 关键字定位：background-position：top left； 2. 像素定位：background-position：x px  y px； 3. 百分比定位：background-position：x% y%； 其中，1、2都是将背景图左
web移动前端页面，jquery判断页面滑动方向
liudanyang_21的博客
07-16 185
/*判断上下滑动：*/ $('body').bind('touchstart',function(e){ startX = e.originalEvent.changedTouches[0].pageX; startY = e.originalEvent.changedTouches[0].pageY; }); $("body").bind("touchmove",function(e){ //获取滑动屏幕时的X,Y endX = e.originalEvent.changedTouches[0].pag.
对background-position的理解
木缘的博客
07-25 1450
在文档上看到对于background-position的解释有些含糊，翻阅《CSS设计指南》后发现书上讲得挺清楚的，在此做个总结。 background-position属性用来控制背景（图）相对于元素的位置，元素的左上角和图片的左上角默认是对齐的。该属性可以使用三种值：关键字、百分比、绝对或相对单位的数值。 关键字：包括top、left、bottom、right和center，这5个关键字两...
CSS background-position属性
小阳的博客
11-27 5775
一、坐标系及原点就像CSS的position属性是定位元素一样，background-position属性定位的是背景图片的。他定位的的是由background-image属性定义的背景图片（注意，这里并不是定位由background-color定义的背景颜色）。它的格式基础模型为：background-position：xpos ypos;其中xpos表示x轴（水平位置）方向的坐标，ypos表示y
CSS-背景位置-x | background-position-x
weixin_33910385的博客
09-12 2000
ackground-position-xCSS 属性设置水平方向的位置，与每个背景图片等位置层设置属性background-origin相关。更多信息请查看background-position属性，这个用的比较普遍。 /* Keyword values */ background-position-x: left; backgro...
background-position怎么用
最新发布
02-01
background-position是CSS中用来设置背景图片位置的属性。它可以用于设置背景图片在元素内的水平和垂直方向上的位置。 background-position属性可以接受多种不同的值，包括关键字和长度值。下面是一些常见的用法： 1. 使用关键字： - left：将背景图片左对齐。 - right：将背景图片右对齐。 - center：将背景图片水平和垂直方向上都居中对齐。 - top：将背景图片顶部对齐。 - bottom：将背景图片底部对齐。 2. 使用长度值： - 可以使用像素(px)、百分比(%)或者其他长度单位来指定具体的位置。例如，background-position: 10px 20px; 表示将背景图片在水平方向上向右偏移10像素，在垂直方向上向下偏移20像素。 3. 使用组合值： - 可以使用关键字和长度值的组合来设置水平和垂直方向上的位置。例如，background-position: left top; 表示将背景图片左对齐并顶部对齐。 4. 使用百分比值： - 百分比值是相对于包含元素的宽度和高度来计算的。例如，background-position: 50% 50%; 表示将背景图片在水平和垂直方向上都居中对齐。 需要注意的是，如果只指定一个值，则另一个值默认为center。另外，如果背景图片的大小超过了元素的大小，可以使用负值来进行调整。 希望以上解答对您有帮助！如果您还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值