CSS3之背景 background

时间  2020-03-22
标签 css3 css 背景 background 栏目 CSS 繁體版
原文   原文链接

background  

  background是一个简写属性，能够在一次声明中定义一个或多个属性。除去特定的属性 其余属性能够按任意位置放置。css

background语法：html

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...web

CSS3 background支持多重背景，主要是靠origin、clip和size组成新的background屡次叠加bash

注意

  • background 属性被指定多个背景层时，使用逗号分隔每一个背景层。每一个属性用空格隔开
  • 若是有size的值必须紧跟着position，用 / 隔开
  • background-color只能设置一个值 且被包含在最后一层
  • border-box/padding-box/content-box 若是出现一次则同时设置origin和clip，若是出现两次 第一个指定origin，第二个指定clip
  • 多重背景，其余属性只有一个表示全部的背景共用一个属性的属性值

background-color

  background-color会设置元素的背景色，属性的值为颜色值或者关键字“transparent”两者选其一。background-color的优先级比background-image低，若是同时存在backgound-color和background-image时，image会显示在color上面字体

/* Keyword values */
background-color: red;

/* Hexadecimal value */
background-color: #bbff00;

/* RGB value */
background-color: rgb(255, 255, 128);

/* HSLA value */
background-color: hsla(50, 33%, 25%, 0.75);

/* Special keyword values */
background-color: currentColor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;

复制代码

background-image

  background-image属性用于为一个元素设置一个或者多个背景图像，多个背景图用','隔开。
background-image: url('xx') || linear-gradient(渐变) || none(无背景图)
flex

实例 

/* html */
<div class="border-image-color"></div>
/* css */
.border-image-color {
  width: 500px;
  height: 400px;
  border: 20px dashed yellowgreen;
  background-image: url(https://user-gold-cdn.xitu.io/2020/3/19/170f20b3c106f518?w=642&h=339&f=png&s=107259);
  background-repeat: no-repeat;
  background-origin: border-box;
  background-color: lightSkyBlue;
  background-position: -60px -20px;
}
复制代码

注意

  • background-image的绘制方向在Z轴上堆叠方式，先指定的图像会在后指定图像上面
  • background-image绘制在border之下，background-color之上
  • background-image的绘制、显示位置与background-position、background-clip、background-origin相关

background-origin

  background-origin规定了背景图片background-image属性的原点位置的背景相对区域，为background-position设置初始位置。可是当background-attachment为fixed时，此属性将被忽略，不起做用。ui

属性值： 默认值/padding-box

  • border-box 背景图片的摆放以border区域为参考
  • padding-box 背景图片的摆放以padding区域为参考
  • content-box 背景图片的摆放以content区域为参考

background-position

  background-position为每一个背景图片设置初始位置，background-position的原点是background-origin定义的位置，相对偏移量都是以原点为基准。url

属性值：默认值/left top

三种取值类型能够混合使用spa

  • 关键字
    • center用来居中背景图片
    • left、right指定图片放置于X轴的左右边缘
    • top、bottom指定图片放置于Y轴的上下边缘
  • length 数值+ 'px'，指定相对于X,Y坐标的位置
  • percentage 百比分，指定相对于X,Y坐标的位置

值个数

  • 关键字取单个值，另一个位置默认为 center
  • length、percentage取一个值 当前值同时指定X轴与Y轴的坐标
  • length、percentage取两个值，第一个值定义X轴的方向、第二值定义Y轴的方向
  • 四个值 position: bottom 10px right 20px; 关键字定义位置，length/percentage定义距离

扩展

background-position属性已经获得扩展，它容许咱们指定背景图片距离任意角的偏移量，只要咱们在偏移量(length/percentage)前面指定关键字(top,bottom,left,right)3d

percentage语法

  百分比值的偏移指定图片的相对位置和容器相对位置重合。值0%表示图片的(左上)边界与容器(左上)边界重合，值100%表明图片的右边界（或下边界）和容器的右边界（或下边界）重合。值50%则表明图片的中点和容器的中点重合。

percentage公式：
  (container width - image width) * (position x%) = (x offset value)
  (container height - image height) * (position y%) = (y offset value)    

/* html */
<div class="border-image-color"></div>
/* css */
/*
    图片宽度： 642px
    容器宽度: 742px
    容器宽度：，容器box-sizing与背景background-origin同步做用
    若想X方向上移动20px：20px / (742px - 642px) = 20%
    X方向上移动20%，实际移动像素值： (742px - 642px) * 20% = 20px
    
    其中若background-origin为padding-box
    实际容器宽度应为包裹图片时原点origin控制的部分
    容器宽度则须要减去边框40px，实际为702px，再在X轴移动20%时实际移动的像素：
    (702px - 642px) * 20% = 12px
*/
.border-image-color {
  box-sizing: border-box;
  width: 742px;
  height: 400px;
  border: 20px dashed yellowgreen;
  background-image: url(https://user-gold-cdn.xitu.io/2020/3/19/170f20b3c106f518?w=642&h=339&f=png&s=107259);
  background-repeat: no-repeat;
  background-origin: border-box;
  background-color: lightSkyBlue;
  background-position: 20% 0px;
}
复制代码

background-size

  background-size设置背景图片的大小。图片能够保有原有的尺寸，或者拉伸到新的尺寸，或者保持其原有比例的同时缩放到元素的可用空间尺寸

属性值：默认值/auto auto

  • 关键字
    • auto 以背景图片的比例缩放背景图片。
    • cover 缩放背景图片以彻底覆盖背景区，可能背景图片部分看不见。和 contain 值相反，cover值尽量大的缩放背景图像并保持图像的宽高比例(图像不会被压扁)
    • contain (背景区容纳背景图片)缩放背景图片以彻底装入背景区，可能背景区部分空白。contain尽量的缩放背景并保持图像的宽高比例(图像不会被压缩)

  • length 指定背景图的宽高，不能为负值
  • percentage 指定背景图片相对背景区(同position的容器宽高)的百分比。背景区由background-origin设置

background-repeat

  background-repeat属性定义背景图像的重复方式。背景图像能够沿着水平轴，垂直轴，两个轴重复，或者根本不重复。

属性 定义
repeat 图像会按需重复来覆盖整个背景图片所在的区域. 最后一个图像会被裁剪, 若是它的大小不合适的话. repeat-x、repeat-y指定单方向重复
space 图像会尽量得重复, 可是不会裁剪. 第一个和最后一个图像会被固定在元素(element)的相应的边上, 同时空白会均匀地分布在图像之间. background-position属性会被忽视, 除非只有一个图像能被无裁剪地显示. 只在一种状况下裁剪会发生, 那就是图像太大了以致于没有足够的空间来完整显示一个图像.
round 随着容许的空间在尺寸上的增加, 被重复的图像将会伸展(没有空隙), 直到有足够的空间来添加一个图像. 当下一个图像被添加后, 全部的当前的图像会被压缩来腾出空间. 例如, 一个图像原始大小是260px, 重复三次以后, 可能会被伸展到300px, 直到另外一个图像被加进来. 这样他们就可能被压缩到225px.
no-repeat 图像不会被重复(由于背景图像所在的区域将可能没有彻底被覆盖). 那个没有被重复的背景图像的位置是由background-position属性来决定.

space
round

background-attachment

  background-attachment属性决定背景图像的位置是在视口内固定，仍是随着包含它的区块滚动。

属性值

  • fixed 表示背景相对于视口固定。即便一个元素拥有滚动机制，背景也不会随着元素的内容滚动
  • local 表示背景相对于元素的内容固定。若是一个元素拥有滚动机制，背景将会随着元素的内容滚动， 而且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。
  • scroll 示背景相对于元素自己固定，而不是随着它的内容滚动（对元素边框是有效的）。

background-clip

  background-clip设置元素的背景（背景图片或颜色）是否延伸到边框下面

取值：默认值/border-box

  • border-box 背景延伸至边框外沿（可是在边框下层）
  • padding-box 背景延伸至内边距（padding）外沿。不会绘制到边框处
  • content-box 背景被裁剪至内容区（content box）外沿
  • text 背景被裁剪成文字的前景色,属性值为text时 属性应设置为 -webkit-background-clip, 字体的颜色使用背景色 即color: transparent/-webkit-text-fill-color: transparent;
/* html */
<div class="border-image-color">
  text
</div>
/* css */
.border-image-color {
  box-sizing: border-box;
  width: 642px;
  height: 400px;
  font-size: 100px;
  line-height: 300px;
  text-align: center;
  border: 20px dashed yellowgreen;
  background-image: url(https://user-gold-cdn.xitu.io/2020/3/19/170f20b3c106f518?w=642&h=339&f=png&s=107259);
  background-repeat: no-repeat;
  background-origin: border-box;
  -webkit-background-clip: text;
  color: transparent;
}
复制代码

clip:text

多重背景使用实例

工做场景： 官网主页底部为铺满不一样的图片，图片之上再进行 基本的图片文字排版

使用多重背景处理能够避免冗余空的html元素格外铺图片，避免伪元素和伪类去进行多余的position定位（若背景图片超过2个时，使用伪类和伪元素也比较困难）

多图片为底 

/* html */
<div class="border-image-color">
  <div class="section">
    我是排版一
  </div>
  <div class="section">
    我是排版二
  </div>
</div>

/* css */
.border-image-color {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 600px;
  height: 580px;
  border: 1px solid yellowgreen;
  text-align: center;
  background: url(https://user-gold-cdn.xitu.io/2020/3/20/170f5f4c42de2970?w=672&h=299&f=png&s=146779) 0px 0px,
              url(https://user-gold-cdn.xitu.io/2020/3/19/170f20b3c106f518?w=642&h=339&f=png&s=107259) 0px 250px;
  background-size: contain 250px;
  background-repeat: no-repeat;
}
.section {
  width: 400px;
  height: 200px;
  line-height: 200px;
  margin: 30px auto;
  text-align: center;
  background-color: rgba(0,0,0, .8);
  color: #fff;
}
复制代码
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程