CSS基础知识持续更新

淩亂°似流年 2023-02-21 06:57 226阅读 0赞

### CSS基础知识 ###

*  一.background-position: 属性

# 一.background-position: 属性 #

1.background-position在没有指定时，默认是 0% 和 0%，可以设置 top、bottom、left、right、center 这五个关键字 。  
必须有两个参数，默认是left和top如下：

background: url(1.jpg) 10px 20px;

这行代码表示在原来背景图基础上，偏离左10px，偏离上20px。  
如果我们要得到下面一张图片的 ￥图标，我们应该偏离左0，偏离上-76px，得到代码：

![在这里插入图片描述][20200629174958675.png]

.img { 
    	width:18px; height:18px; 
    	background: url(1.jpg) 0 -76px;
    		}

当然我们也可以指定关键字，得到的结果是一样的：  
![在这里插入图片描述][20200629175412313.png]

.img { 
    	width:18px; height:18px; 
    	background: url(1.jpg) left 0 top -76px;
    		}

我们也可以随意指定两个关键字，如我们需要获得![在这里插入图片描述][20200629175513907.png]  
我们可以指定向偏移右0px，偏移下57px还要加上原来的高度18px也就是75px。得到代码：

.img { 
    	width:18px; height:18px; 
    	background: url(1.jpg) right 0 bottom 75px;
    		}

得到：  
![在这里插入图片描述][20200629180751332.png]

[20200629174958675.png]: https://img-blog.csdnimg.cn/20200629174958675.png
[20200629175412313.png]: https://img-blog.csdnimg.cn/20200629175412313.png
[20200629175513907.png]: https://img-blog.csdnimg.cn/20200629175513907.png
[20200629180751332.png]: https://img-blog.csdnimg.cn/20200629180751332.png

发表评论取消回复

表情：

评论列表（有 0 条评论，226人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android基础知识点（持续更新中）

1.数据传递: > 通过 Intent 对象来传递对应的数据，采用的是 key->value 的形式 public void sendInfo(){

以你之姓@/ 2023年10月18日 16:47/ 0 赞/ 181 阅读

相关 Java基础知识小结(持续更新)

目录一丶Java开发环境环境变量配置二丶标识符、关键字、数据类型 1.注释 2.分隔符、代码块 3.标识符 4.关键字 5.基本数据类型 6.常量、变

电玩女神/ 2023年10月11日 21:11/ 0 赞/ 67 阅读

相关 CSS基础知识持续更新

CSS基础知识一.background-position: 属性一.background-position: 属性 1.background-posit

淩亂°似流年/ 2023年02月21日 06:57/ 0 赞/ 227 阅读

相关 python基础知识整理(持续更新)

""" 切片负数开头，结尾均不包含及左开右开,留截取相交部分正数左闭右开留截取部分 """ a='hello world' print(a[

偏执的太偏执、/ 2022年12月05日 13:59/ 0 赞/ 260 阅读

相关 C++基础知识总结（持续更新）

目录 0.写在前面 1.数组问题 1.1 一维数组 1.2 多维数组 1.3 指向数组的指针 1.4 传递数组给函数 1.5 从函数返回数组 2.vector问

傷城~/ 2022年12月02日 10:45/ 0 赞/ 298 阅读

相关记住java知识点_【持续更新】Java知识点整理-基础

运算符优先级 java运算符优先级记忆口诀: 单目乘除为(位)关系，逻辑三目后(填词，无意义)赋值。强制类型转换优先级是高于乘除但低于单目的： int a = (in

向右看齐/ 2022年11月09日 12:52/ 0 赞/ 325 阅读

相关 CSS面试知识点总结(持续更新...)

CSS知识点 1、介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？ 2、CSS 选择符有哪些？ 3. ::before 和:a

向右看齐/ 2022年11月04日 02:01/ 0 赞/ 301 阅读

相关 CSS问题持续更新汇总

1、问题：ios8中一个元素同时设置了以下三个属性的话，样式会错乱，border-radius会失效（ border-radius + overflow: hidden +

布满荆棘的人生/ 2022年10月01日 08:55/ 0 赞/ 325 阅读

相关数学知识总结（持续更新）

仅供本人使用，其他人看看参考下就好 > 1. 知道三角形三个顶点坐标计算三角形面积：三个顶点A(x1,y1),B(x2,y2),C(x3,y3);S=1/2\(x1\(y2

深藏阁楼爱情的钟/ 2022年05月19日 04:50/ 0 赞/ 302 阅读

相关 javase基础持续更新

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

Dear 丶/ 2021年07月26日 00:36/ 0 赞/ 501 阅读