热线电话 0472-6868359
首页
关于视觉癖
设计服务
热门主题
投稿通道
设计师入驻
设计师招聘
在线留言
联系我们

热门主题

当前位置:视觉癖 > 热门主题 >

background-position属性(css选择器有哪些)

发布时间:2021-06-13 14:22 所属分类:热门主题 浏览次数:
  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;}
作品标签: 属性 css选择器

评论列表(共71人参与)参与讨论或分享设计作品获得视觉癖积分奖励

用户头像图片
    -timi注册会员
    2021-06-13 23:22:52

    yle="text-align: center;"> 短缺。针眼密密,期盼游子归程;母爱如水,永久闪耀着年月的光芒。预祝母亲节高兴!

    回复
用户头像图片
    d-bl注册会员
    2021-06-13 4:26:28

    iv> 你今天咨询一次,他人现已报名了,你明日问问爸爸,他人现已开端学习,你某天再咨询一次,人家的孩子现已改变在成长了,等你纠结一段时间再来问,他人现已background-position属性10608/1-21060Q52245.jpg" /> 。。。

      用户头像图片
        片 1.我注册会员
        2021-06-13 22:8:27

        @d-bl:background-positi背景墙的规划融合了精巧的大理石图画,展示了不俗的艺术感觉。 02. 定制柜体电视墙 ~~~

    回复
用户头像图片
    有许多事,不游客
    2021-06-13 2:10:14

    游客70680:background-posi> 6、规划本:能够找案例、找规划师、模型下载、有问必答、线下修建规划职业界活动信息; 7、修建与室内规划师网:规划师家乡、规划需求发布、规划选

    回复
用户头像图片
    一,而它注册会员
    2021-06-13 17:7:46

    2. background-p; width: 400px;" /> 太冷了配图

    回复