background-position属性(css选择器有哪些)
background-position属性
1.
background-position:lefttop;
背景图片的左上角和容器(container)的左上角对齐，超出的部分躲藏。
等同于background-position:0,0;
也等同于background-position:0%,0%;
2.
background-position:rightbottom;
背景图片的右下角和容器(container)的右下角对齐，超出的部分躲藏。
等同于background-positon:100%,100%;
也等同于background-positon:容器(container)的宽度-背景图片的宽度,容器(container)的高度-背景图片的高度
3.
background-position:500px15px；
背景图片从容器(container)左上角的当地向右移500px,向下移15px，超出的部分躲藏。
4.
background-position:-500px-15px;
背景图片从容器(container)左上角的当地向左移500px，向上移15px，超出的部分躲藏。
5.
background-position:50%50%;这句常常让新手出错！
等同于left：{容器(container)的宽度—背景图片的宽度}*left百分比，超出的部分躲藏。
等同于right：{容器(container)的高度—背景图片的高度}*right百分比，超出的部分躲藏。
例如：background-position:50%50%;便是background-position:(1000-2000)*50%px,(500-30)*50%px;即background-position:-500px,235px;也便是背景图片从容器(container)的左上角向左移500px，向下移235px；
6.（这种情况背景图片应该用bg2.jpg才能看出作用,bg.jpg的高度太小作用不明显）
background-position:-50%-50%;
等同于left：-{{容器(container)的宽度—背景图片的宽度}*left百分比（百分比都取正值）}，超出的部分躲藏。
等同于right：-{{容器(container)的高度—背景图片的高度}*right百分比（百分比都取正值）}，超出的部分躲藏。
例如：background-position:-50%-50%;便是background-position:-{(1000-500)*50%}px,-{(500-360)*50%}px;即background-position:-250px,-70px;也便是背景图片从容器(container)的左上角向左移250px，向上移70px；
css选择器有哪些
要运用css对HTML页面中的元素完成一对一，一对多或者多对一的操控，这就需求用到CSS挑选器。HTML页面中的元素便是通过CSS挑选器进行操控的。
什么是挑选器呢？
每一条css款式定义由两部分组成，方式如下：
挑选器{款式}
在{}之前的部分便是“挑选器”。“挑选器”指明了{}中的“款式”的效果目标，也便是“款式”效果于网页中的哪些元素。
css中有哪些挑选器？
类挑选器（如：class="head",class="head_logo"）
ID挑选器（如：id="name",id="name_txt"）
标签挑选器（如：body,div,p,ul,li）
子孙挑选器
子孙挑选器也称为包括挑选器，用来挑选特定元素或元素组的子孙，将对父元素的挑选放在前面，对子元素的挑选放在后面，中心加一个空格分隔。
子挑选器
子挑选器（childselector）仅是指它的直接子孙，或者你可以理解为效果于子元素的第一个子孙。以>离隔父子级元素，(模块名>模块名，润饰>前模块内的子模块)
伪类挑选器（如：便是链接款式,a元素的伪类，4种不同的状况：link、visited、active、hover。）
通用挑选器（*）
群组挑选器
以，分隔(逗号分离隔需求润饰的模块名)。当几个元素款式特点相同时，可以一起调用一个声明，元素之间用逗号分隔。
相邻同胞挑选器
以+离隔相邻联系的元素(模块名+模块名润饰加号前模块往下的相邻的模块只一个)。
特点挑选器
特点挑选器，是依据元素的特点来匹配的，其特点可以是规范特点也可以是自定义特点；
伪元素挑选器
所有伪元素挑选器都必须放在呈现该伪元素的挑选器的最后面，也便是说伪元素挑选器不能跟任何派生挑选器。
结构性伪类挑选器
UI元素状况伪类挑选器
以上挑选器在日常开发中最常用的便是标签挑选器、类挑选器和id挑选器，下面是这三种挑选器的基本用法：
1、标签名挑选器
一个XHTML文档中有许多标签，例如p标签，h1标签等。若要使文档中的所有p标签都运用同一个CSS款式，就应运用标签挑选器。
div{color:red;border:1pxbluesolid;}
p{color:#000;}
2、类挑选器
运用标签挑选器可认为整个XHTML文档中的同一个标签指定相同的CSS款式。但是在实际运用中，XHTML文档中的同一个标签会被反复运用。若要为相同的标签赋予不同的CSS款式就应运用类挑选器。
测试代码
.test{color:red;border:1pxbluesolid;}
3、id挑选器，id挑选器是唯一的，只可以获取独一无二的一个元素。
测试代码
#test{color:red;border:1pxbluesolid;}
优秀作品：
最新作品：
评论列表（共276人参与）参与讨论或分享设计作品获得视觉癖积分奖励
d-bl注册会员
2021-06-13 0:58:25
iv> 你今天咨询一次，他人现已报名了，你明日问问爸爸，他人现已开端学习，你某天再咨询一次，人家的孩子现已改变在成长了，等你纠结一段时间再来问，他人现已background-position属性10608/1-21060Q52245.jpg" /> 。。。
有许多事，不游客
2021-06-13 5:59:30
游客93302：background-posi> 6、规划本：能够找案例、找规划师、模型下载、有问必答、线下修建规划职业界活动信息； 7、修建与室内规划师网：规划师家乡、规划需求发布、规划选
回复