CSS常用样式,你实在驾驭background

你真正明白background-position

2017/01/16 · CSS ·
background

CSS常用样式,你实在驾驭background。原文出处:
大漠   

background属性是CSS中最广大的特性之一,它是一个简写属性,其包蕴background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground-clipbackground-originbackground-size。你恐怕会说,这么些属性再简单但是了,没有可讲的。那篇文章接下去要介绍的不是负有有关于background中间的习性,而是说说background-position特性。在事无巨细介绍background-position事先,先要问大家,你实在驾驭这些特性吗?言外之意,接下去介绍是你所不打听的background-position相关细节。

本文是2016年的尾声一篇小说,紧如果将一些CSS细节难点整治一下。

当background-postion取值为百分比时,计算格局:

一、边框样式

你所驾驭的background-position

background-position是用来决定元素背景图片的职位。它承受三种值:

  • 关键词,比如toprightbottomleftcenter
  • 长度值,比如pxemrem
  • 百分值%

我们最常用的是值也得以说最明白的值是关键词长度值,当然百分比也会动用,可是百分比使用最多的是0%50%100%

亚洲必赢官网 1

来看一个不难的事例:

将效率图截取做一个简易的解析:

亚洲必赢官网 2

图表上的标号音讯已经告诉我们很详细的新闻了。示例中容器具备下述特性:

  • div容器尺寸410px x 210px,边框宽度10px
  • 容器背景图尺寸100px x 100px
  • 首先张背景图background-position:10px 10px;第二张背景图background-position: center
  • 里头黑白格子尺寸是10px x 10px

很正常的一对特征,也得以说是如数家珍可是的特征。那么上边,大家来聊点我们不为所知的background-position

  • background-position取值为百分比的乘除格局
  • margin相邻折叠难点
  • position的absolute和relative定位top、left、right、bottom问题
  • 覆盖样式难题

当背景图片尺寸(background-size)不做其他的重置(也就是100%
100%)时,水平百分比的值等于容器宽度百分比率减去背景图片宽度百分比率。垂直百分比的值等于容器中度百分比率减去背景图片高度百分比率。

若是background-position取值background-position: 75%
50%;,背景图片的苗头地点:

水平地点(x轴)= (容器宽 – 背景图宽) * 75%
垂直地方(y轴)= (容器高 – 背景图高) * 50%

1、border:复合属性。设置对象边框的表征。

你所不亮堂的background-position

前边也说过了,background-position取值除了长度值(<length>)和要紧词之外,还足以取值为百分比率。当然大家也使用过百分比率,比如:

CSS

body { background-position: 100% 0% } /*亚洲必赢官网 , right top */ body {
background-position: 50% 0% } /* top center */ body {
background-position: 50% 50% } /* center */ body {
background-position: 50% 100% } /* bottom */

1
2
3
4
body { background-position: 100% 0% }  /* right top */
body { background-position: 50% 0% }   /* top center */
body { background-position: 50% 50% }  /* center */
body { background-position: 50% 100% } /* bottom  */

那么难点来了,你确实掌握background-position取值为百分比的计算比例吗?倘若自身的百分比值不是和首要词对等的值吗?那么它是怎么总括的?这一文山会海的标题,你是否有细致的思索过。就自身个人而言,我之前所精晓也存在一个误区:

自家一贯清楚的background-position百分比率,它是龃龉于背景图片的尺码。

但事实上,那种领会是一种错误。那也是今日踩的坑发现的。然后立马查了弹指间有关的规范文档,才彻底的搞精通。那接下去,我们就来聊background-position取值为百分比的测算方法。

W3C规范是那般描述的:

A percentage for the horizontal offset is relative to (width of
background positioning area – width of background image). A percentage
for the vertical offset is relative to (height of background
positioning area – height of background image), where the size of the
image is the size given by ‘background-size’.

也就是说,当背景图片尺寸(background-size)不做任何的重置(也就是100% 100%)时,水平百分比的值等于容器宽度百分比率减去背景图片宽度百分比率。垂直百分比的值等于容器中度百分比率减去背景图片中度百分比率。

比如说前边的言传身教,倘诺取值background-position: 75% 50%;,背景图片的苗子地点:

  • 水平地方(x轴):(410 - 100) * 75% = 232.5px
  • 垂直地方(y轴):(210 - 100) * 50% = 55px

经过一个Gif图来描述其对应的成效:

亚洲必赢官网 3

以身作则中八个div,其中第二个divbackground-position动用的是px值,第二个divbackground-position采用的是%

  • 第一个divbackground-position的值从0px 0px232.5px 55px
  • 第二个divbackground-position的值从0% 0%75% 50%

按照专业,以及前边的总计,不难窥见第三个divbackground-position职位相同。用张草图来描述,我们更易理解其中的意义:

亚洲必赢官网 4

地点介绍的是background-position取值为百分比率的盘算办法。接下来再介绍一个background-position前景将富有的风味。就是足以显式的通过重大词指定背景图片距离容器的义务。比如:

CSS

background-position: left 10px top 15px; /* 10px, 15px */
background-position: left top ; /* 0px, 0px */ background-position:
10px 15px; /* 10px, 15px */ background-position: left 15px; /* 0px,
15px */ background-position: 10px top ; /* 10px, 0px */
background-position: left top 15px; /* 0px, 15px */
background-position: left 10px top ; /* 10px, 0px */

1
2
3
4
5
6
7
background-position: left 10px top 15px;   /* 10px, 15px */
background-position: left      top     ;   /*  0px,  0px */
background-position:      10px     15px;   /* 10px, 15px */
background-position: left          15px;   /*  0px, 15px */
background-position:      10px top     ;   /* 10px,  0px */
background-position: left      top 15px;   /*  0px, 15px */
background-position: left 10px top     ;   /* 10px,  0px */

只可是浏览器暂时还不帮助此特性,但本身想为来有一天我们在实际的档次中可以运用上。

1、background-position取值为百分比的计算形式

初稿地址

  取值:

总结

平常在许多开发者眼中,CSS是可怜的简单。没有其余的技术价值,但其实并非如此,即使确实去探索的话,CSS还有不少妙不可言的东东。比如那篇小说,我想有很多开发者跟我一样,并从未把那样简单的一个CSS属性搞精通,搞彻底。最好期待大家能保持一颗商量的心,不断的去追究你想追究的别样文化。最终希望那篇文章对你拥有协理,借使您有更好的提议或大费周折,欢迎在下边的评论中与我们一道享用。

1 赞 3 收藏
评论

亚洲必赢官网 5

background-position属性相信你用的众多,可是当取值为百分比时,你是不是觉得它是相对于背景图片的尺码来测算(我前边也是这种想法,但看了大漠老师的《你真正了然background-position》后,才知大错特错)

  border-width: 设置或探寻对象边框宽度。

来探望下边的代码:

  border-style: 设置或探寻对象边框样式。

.box {   
  width:400px;   
  height:400px;   
  background-color:black;   
  background-image:url(mm.jpg);   /* 图片原尺寸150 * 225 */
  background-repeat:no-repeat;   
  background-position:50% 50%;  
}

  border-color: 设置或探寻对象边框颜色。

深信background-position: 50%
50%您用的累累,那是让背景图片居中,约等于center center。

#border4
 {
      width: 100px;
      height: 100px;
      border:1px solid #FF0000;
 }

<div id="border4"></div>

效益如下:

 

亚洲必赢官网 6

 

如若50%是根据图片的尺码(150 *
225)来计算的,那么其值转换为像素值应该是75px
112.5px,你以为背景图片能在400 *
400的块里居中吗?答案很扎眼,是或不是认的,那是如何计算的呢?

2、border-width:设置对象的边框宽度。  

实质上官方说法是如此的:

  取值:

当背景图片尺寸(background-size)不做其他的重置(也就是100%
100%)时,水平百分比的值等于容器宽度百分比率减去背景图片宽度百分比率。垂直百分比的值等于容器高度百分比率减去背景图片中度百分比率。

  meadium:  定义默许厚度的边框

水平位置: (400 - 150) * 50% = 125px
垂直位置: (400 - 225) * 50% = 87.5px

    thin:  定义比默许厚度细的边框。

2、margin相邻折叠难点

  thick:  定义比默认厚度粗的边框。

在开发中,大家偶尔会碰着强烈多少个div都设置了margin,不过它们之间的距离就是不对等四个div的margin之间的和,那是怎么吗?其实是因为在少数意况下,多少个或三个块元素的邻座边界(其间没有此外非空内容、padding、边框)会发出合并成单一边界,也就是标题说的折叠。

 ★ 如果提供任何七个参数值,将按上、右、下、左的依次效能于四边。

先来看看兄弟块级元素的折叠,如下图所示:

   
 如若只提供一个,将用于所有的四边。

亚洲必赢官网 7

   
 假设提供多个,第四个用于上、下,第四个用于左、右。

dfasdfsadfwer.jpg

   
 如若提供多个,首个用于上,首个用于左、右,第三个用于下。

还要小心的是,父元素与其子元素之间也会暴发折叠:

  也得以分级对四边设置边框:

亚洲必赢官网 8

    border-top-width
设置上面框宽度

2个或多少个块级相邻元素的异乡距(margin)的折叠规则:

    border-bottom-width
设置下面框宽度

  • 外边距都为正值时,取最大值
  • 不全是正值时,则用正在减去(所有值的相对化值中)最大值
  • 全为负值时,则取最小值

    border-left-width
设置左侧框宽度

不暴发折叠意况:

    border-right-width
设置左侧框宽度

  • 水平(左右)外边距不会折叠
  • 变更元素的异地距不会折叠,并且转变元素与它的子元素之间也不会时有暴发折叠
  • 安装了overflow且值不为visible的块级元素与它的子元素之间的异乡距也不会被折叠
  • 相对定位(position:absolute;)元素的margin不与别的margin暴发折叠,并且与它的子元素之间的margin也不会生出折叠
<style>            
    #border1{
    width:200px;
    height:100px;
    border:solid;
    /*border-width: 5px;*/
    border-width:2px 3px 4px 5px ;                
            }
</style>

<div id="border1"></div>

焚林而猎折叠的点子:

 

  • 外层元素用padding替代margin
  • 外层元素设置overflow:hidden
  • 内层元素加padding:1要么border
  • 内层元素加浮动(float)或设为(display:inline-block)
  • 内层元素运用绝对化定位(position:absolute;)

 

3、position的absolute和relative定位top、left、right、bottom问题

3、border-color:设置或探寻对象的边框颜色

纯属定位(position:absolute)的top、left、right、bottom是相对于其兼具相对固定属性(position不为static)的父元素(不自然是其直接父元素,有可能是先人元素)。

  取值:

假使两者(top、bottom)同时设有时,唯有top起效果;借使两岸(left、right)同时存在时,唯有left起效果。

  (1)英文单词的颜色,如“blue”、“red”

相对稳定(position:relative)元素会保留原来占有的岗位,其后边的因素按原来文档流仍旧维持原来的任务
top的值表示对象相对原岗位向下偏移的偏离
bottom的值表示对象相对原岗位向上偏移的距离
left的值表示对象绝对原岗位向右偏移的相距
right的值表示对象相对原岗位向左偏移的偏离
如果两岸(top、bottom)同时存在时,唯有top起效果;要是两者(left、right)同时存在时,只有left起效果。

  (2)十六进制值,如“#ffffff”、“#ff0000”

看一个例子:

  (3)rgba、rgb,如rgba(0,0,0,.5)、rgb(255,255,255)

亚洲必赢官网 9

<style>            
    #border2
      {
         width: 200px;
         height: 100px;
         border: solid;            
         border-color: #FF0000;                
    }
</style>

<body>
        <div id="border2"></div>        
</body>    
<style>
.prev{   
  width:100px;    
  height:100px;   
  position:relative;   
  background:blue;   
  top:20px;   
}   
.next{   
  width:100px;   
  height:100px;   
  background:red;   
}   
.fl{   
  float:left;   
  margin:20px;   
}
</style>

<div class="fl">   
  <div class="prev" style="position:static"></div>   
  <div class="next"></div>   
</div>   
<div class="fl">   
  <div class="prev"></div>   
  <div class="next"></div>   
</div>

 

从下面的代码和机能图,你可以看来,设置了position:relative的因素设置了top:20px,尽管(相对其原义务)向下活动了20px,可是并不会影响其后边的因素。

 

4、覆盖样式难点

4、border-style:设置对象的边框样式

例如大家有一个公共文件,其下有一个公共样式:

     
 取值:

.box {
  color: red;
}

  none:无轮廓。border-color与border-width将被忽略

有点时候,大家需求覆盖那几个样式,比如将红色改为红色。由于是公家元素,大家无法直接修改,但方法仍旧有种种:

     
 hidden:隐藏边框。IE7及以下尚不协助

/*第一种*/
.parent .box {
  color: green;
}
/*第二种*/
.box {
  color: green !important;
}

     
 dotted:点状概况。IE6下显得为dashed效果

地点这一个是大家常用的,但还有一个小技巧,是大家平时不太专注的,可以如下设置:

     
 dashed:虚线轮廓。

.box.box {
  color: green;
}

     
 solid:  实线概略。

后天就介绍这么多,如有错误,欢迎指正!

     
 double:双线概略。两条单线与其距离的和卓殊指定的border-width值

原稿链接:关于CSS一些细节难点

  可以对四边分别设置其边框样式:

#border3
  {
   width: 200px;
   height: 100px;
   border: solid;
   border-top-style:dotted ;
   border-left-style:dashed ;    
   border-right-style: double;
   border-bottom-style: solid;    
  }

<div id="border3"></div>

 

 

5、border-radius:设置对象使用圆角边框

  • 水平半径:纵然提供一切多少个参数值,将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序效率于三个角。
  • 即使只提供一个,将用以所有的于多少个角。
  • 设若提供多个,第二个用于上左(top-left)、下右(bottom-right),第二个用于上右(top-right)、下左(bottom-left)。
  • 假诺提供多少个,第二个用于上左(top-left),第四个用于上右(top-right)、下左(bottom-left),首个用于下右(bottom-right)。
     

   取值

      length:用长度值设置对象的圆角半径长度。不允许负值

 
 percentage:用百分比设置对象的圆角半径长度。不允许负值 

  

CSS代码
#yj{
                background-color:indianred ;
                width: 100px;
                height: 100px;
                border-radius: 10px 10px 20px 20px;

            }
HTML代码:
<div id="yj"> </div>

 

 二、段落样式

1、行高:

  控制段落内每行中度

  line-height:nornmal|length

  CSS代码:

#duan1
 {
      border: 1px solid black;
      width: 500px;
      height:30px ;
      line-height: 30px;
  }

  HTML代码:

<body>        
        <p id="duan1">CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。</p>
</body>

CSS3是CSS2的进步版本,3只是本子号,它在CSS2.1的根底上加码了好多精锐的新效用。

 

 2、段落缩进:

  操纵段落的首行缩进

  text-indent:length

  CSS代码:

      #duan2
        {
            width: 200px;
            text-indent: 2em;/*1em为16px。这里缩进2个字符*/
        }

 HTML代码:

 <p id="duan2">CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。</p>

 

亚洲必赢官网 10

3、段落对齐:

  控制段落对齐情势,不可是文件,对象中的其他inline或inline-block元素也可以被text-
align进行对齐形式的安装。

  取值:

     text-align:left      左对齐

       right      右对齐

       center   居中对齐

       justify   两端对齐

   CSS代码:

              #duan3
        {
            background-color: aquamarine;
            width: 150px;
            text-align: right;
        }

   HTML代码: 

<p id="duan3">CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。</p>

   效果:

  亚洲必赢官网 11

4、文字间距:

  控制段落的文字间的距离

  letter-spacing : normal | length 

  CSS代码:

             #duan4
        {        
            width: 150px;
            letter-spacing: 5px;
        }

  HTML代码:

        <p id="duan4">CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。</p>

  效果:

  亚洲必赢官网 12

5、文字溢出:

  控制文字内容溢出有些的体制

  text-overflow:clip    将溢出一些裁切掉   

           ellipsis  将溢出一部分替换为(…)

  注: 但是text-overflow只是用来验证文字溢出时用什么样措施体现,要达成溢出时爆发省略号的功效,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐匿(overflow:hidden),唯有这么才能促成溢出文件展现省略号的职能。

  CSS代码:

        #duan5
        {
            width: 50px;
            height: 30px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }            

  HTML代码:

  <p id="duan5">CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。</p>

  效果:

  亚洲必赢官网 13

6、段落换行:  

  控制内容领先容器的界限时是否断行。

  word-wrap:    normal         允许内容顶开或溢出指定的容器边界。

            break-word  
  内容将在边际内换行。假如急需,单词内部允许断行。

  CSS代码:

        .test p{width:100px;border:1px solid #000;}
        .normal p{word-wrap:normal;}
        .break-word p{word-wrap:break-word;}

  HTML代码:

<ul class="test">
    <li class="normal">
        <strong>normal:</strong>
        <p>abcdefghijklmnopqrstuvwxyz</p>
    </li>
    <li class="break-word">
        <strong>break-word:</strong>
        <p>abcdefghijklmnopqrstuvwxyz</p>
        </li>
</ul>

亚洲必赢官网 14

 

三、背景样式

  1、背景颜色   

    background-color : transparent | color

  例子:

  body { background-color:#CCCCCC;}

   h1 { background-color:#EDEDED;}

  2、背景图片 

  background-image : none | url ( url )  url:图片保存的地址

  CSS代码:

           #bgimg
        {
            width: 200px;
            height: 200px;
            background-image: url(img/fenfjing.jpg);
        }

  HTML代码:

<div id="bgimg">这里加了背景图片!</div>

  亚洲必赢官网 15

 

  3、背景平铺情势 

  background-repeat : repeat | no-repeat | repeat-x | repeat-y

  取值:

     repeat-x:
背景图像在横向上平铺

     repeat-y:
背景图像在纵向上平铺

     repeat:
背景图像在横向和纵向平铺

     no-repeat:
背景图像不平铺

     round:
背景图像自动缩放直到适应且填充满整个容器。(CSS3)

     space:
背景图像以同一的间隔平铺且填充满整个容器或某个方向。(CSS3)

CSS代码:

             #bgimg
        {
            width: 400px;
            height:200px;
            background-image: url(img/fenfjing.jpg);
            background-repeat: repeat;
        }

HTML代码:

<div id="bgimg">这里背景图片平铺了!</div>

亚洲必赢官网 16

4、背景定位

background-position : 左对齐格局 上对齐方式  注:设置或探寻对象的背景图像地方,必须先指定background-image属性。

取值:

percentage:用百分比指定背景图像填充的岗位。可以为负值。
length:用长度值指定背景图像填充的职位。可以为负值。
left:背景图像在横向上填充从左边初始。
center:背景图像在横向上填充从中路起始。
right:背景图像在横向上填充从左侧先河。
top:背景图像在纵向上填充从顶部初阶。
center:背景图像在纵向上填充从中间初始。
bottom:背景图像在纵向上填充从最底层开始。
CSS代码:

             #bgimg
        {
            width: 200px;
            height:300px;
            border: 1px solid black;            
            background-position: left top;
            background-image: url(img/mine.png);
            background-repeat: no-repeat;            
        }        

HTML代码:

为背景图片设置了位置

亚洲必赢官网 17

5、背景原点

background-origin : border-box | padding-box | content-box;  注:必须保障背景是background-repeat为no-repeat
此属性才会立竿见影。

取值:

padding-box:从padding区域(含padding)伊始显得背景图像。
border-box:从border区域(含border)初阶体现背景图像。
content-box:从content区域开头呈现背景图像。
CSS代码:

            #bgorigin
        {
            width: 150px;
            height: 100px;
            border: 15px solid cornflowerblue;
            background-image: url(img/mine.png);
            background-repeat: no-repeat;
            background-origin: border-box;
        }            

HTML代码:

亚洲必赢官网 18

6、背景的显得区域

设定背景图像向外裁剪的区域。

background-clip : border-box | padding-box | content-box | text

取值:

padding-box:从padding区域(不含padding)开首向外裁剪背景。

border-box:从border区域(不含border)伊始向外裁剪背景。

content-box:从content区域开端向外裁剪背景。

text:在此之前景内容的形象(比如文字)作为裁剪区域向外裁剪,如此即可兑现应用背景作为填充色之类的遮罩效果。

CSS代码:

           #pclip{
            width:200px;
            height:200px;
            margin:0;
            padding:20px;
            border:10px dashed #666;
            background:#aaa url(img/fenfjing.jpg) no-repeat;

        }                

HTML代码:

<ul class="test1">
    <li class="border-box">            
    <p id="pclip">从border区域(不含border)开始向外裁剪背景</p>
    </li>
</ul>    

亚洲必赢官网 19

7、背景尺寸

安装背景图片的高低,以长度值或比重突显,还足以经过cover和contain来对图片进行伸缩。

length:用长度值指定背景图像大小。差距意负值。

<percentage>:用百分比指定背景图像大小。差别意负值。

auto:背景图像的诚实大小。

cover:将背景图像等比缩放到完全覆盖容器,背景图像有可能超乎容器。

contain:将背景图像等比缩放到步长或可观与容器的拉长率或可观相等,背景图像始终被含有在容器内。

CSS代码:

            #bgimg
        {
            width: 200px;
            height:100px;
            border: 1px solid black;                        
            background-image: url(img/mine.png);
            background-repeat: no-repeat;
            background-size: 100px 50px;            
        }              

HTML代码:

<div id="bgimg"></div>

亚洲必赢官网 20

8、背景样式缩写

背景样式多少个属性的缩写

background: 背景象 背景图片 背景平铺情势 背景定位

例: body {

     background-color:# EDEDED;

            background-image:url(images/bg.png);

            background-repeat:no-repeat;

            background-position:50% 30px;

      }

         缩写后:

      body { background:#EDEDED url(images/bg.png) no-repeat 50% 30px;}

9、多重背景

  • 一个因素得以设置多重背景图像。
  • 每组属性间使用逗号分隔。
  • 借使设置的多级背景图之间存在着夹杂(即存在重视叠关系),前边的背景图会覆盖在背后的背景图之上。

  注:用逗号隔开每组 background
的缩写值; 借使有 size 值,须要紧跟 position 并且用 “/” 隔开;
如果有多少个背景图片,而其它属性只有一个(例如 background-repeat
唯有一个),注脚 所有背景图片应用该属性值。
background-color 只好设置一个。

     例:

CSS代码:

        #mutilbg
        {
            width: 200px;
            height: 200px;
            background:url(img/mine.png) no-repeat 100px     100px,url(img/fenfjing.jpg) no-repeat 0px 0px;
        }

HTML代码:

<div id="mutilbg"></div>

亚洲必赢官网 21

 

 

 

  

 

 

 

网站地图xml地图