前端泥瓦匠

Appearance

Return to top
On this page

背景相关

背景属性

背景缩写缩写可以卸载一个声明中设置所有的背景属性
背景图像支持引入多个图像
主要属性有：
background-color
background-image
background-repeat
background-position
background-attchment
background-size
background-origin
background-clip

背景颜色

background-color

  • 指定要使用的背景颜色 例如：background-color:#ffcc00
  • 可以简写为 background
  • backround-color 不能继承，其默认值是 trandsparent。trandsparent 有透明之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。
  • transparent 指定背景颜色应该是透明的，默认值。
  • inherit 指定背景颜色，应该从父元素继承
css
.box{
  width:650px;
  height:32px;
  /*  颜色 */
  background-color:orange;
  /*  字体颜色 */
  color:#fff;
  /*  字体内容水平居中 */
  text-aligh: center;
}

div{
	width:200px;
  height:200px;
  background-color:darkbule;
  /*上下0 左右auto 块元素水平居中*/
  margin:0 auto;
   /*垂直居中*/
  line-height:200px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

背景图片

background-image

  • url('图像的 url 路径地址') 图像的 url
  • none 表示北京上没有防止任何图像，这就是默认值
  • inherit 指定背景图像应该从父元素继承
  • 一个元素可以引入多张背景图片，指定要使用的一个或者多个背景图像，默认情况下 background-image 放置在元素的左上角，并重复垂直的水平方向。
  • background image:url('pic.png'),url('pic2.png')... ...
  • background image 属性不能继承

背景重复

  • 指定如何重复背景图像，默认情况下，重复 background-image 的垂直和水平方向
  • repeat 背景图像向垂直和水平方向垂直。这是默认
  • repeat-x 只有水平位置会重复背景图像
  • repeat-y 只有垂直位置会重复背景图像
  • no-repeat background-image 不会重复
  • inherit 指定背景重复应该从父元素继承
css
.logo{
	width:300px;
  height:300px;
  background-image:url('../xxx/png');
  /*平铺的方式（重复）  */
  background-repeat:repeat x;
}
1
2
3
4
5
6
7

背景定位

  • background-position 属性设置背景图像的起始位置；
  • xpos ypos 第一个值的水平位置，第二个值是垂直。左上角是 0。单位可以是长度值 px，关键字和百分数值
  • 关键字成对出现 left right top bottom center，如果仅指定一个关键字，其他值将会“center”
  • x% y% 第一个值水平位置，第二值是垂直。左上角是 0%0%。
  • inherit 指定 background-position 属性设置应该从父元素继承
css
.logo{
	width:400px;
	height:400px;
    /* 背景颜色 */
	background-color:#3385ff;
    background-image:url('./xxx.png');
    background-repeat:no-repeat;
    /* x轴的坐标(水平方向)y轴的坐标方向(垂直方向) x轴越大 越往右 x轴越大 越往下 */
    background-position:50px 50px;
    /* 50% 50% > center center 中心位置*/
}
1
2
3
4
5
6
7
8
9
10
11

经常使用在雪碧图中

背景关联

background-attachmen

  • 设置背景图像是否固定或者随着页面的其余部分滚动
  • scroll 背景图片随页面的其余部分滚动。这是默认
  • fixed  背景图像是固定的
  • inherit 指定 background-attachment 的设置应该从父元素继承
css
* {
	padding:0px;
  margin:0px;
}

.banner {
	width:100%;
  height:800px;
  background:url("../xxx.png") no-repeat
}

.banner01{
	width:100%;
  height:800px;
  background:url("../xxx.png") no-repeat
}

.banner02{
  width:100%;
  height:800px;
  background:url("../xxx.png") no-repeat;
  /* 可以固定不动 */
  background-attachment:fixed;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

设置对象的背景图像的尺寸大小

background-size

  • <length>用长度值指定背景图像大小。不允许负值；
  • <percentage>用百分比指定背景图像大小。不允许负值。
  • auto 背景图像的真实大小
  • cover 将背景图等比例缩放到完全覆盖容器，背景图像有可能超出容器；
  • contain 将背景图像等比例缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内
css
.pic{
	width:200px;
  height:1600px;
  background:url('../xx.png');
  background-size:300px 300px // x轴  y轴
}
1
2
3
4
5
6

设置对象的背景图像向外裁剪的区域

background-clip

  • padding-box: 从 padding 区域（不含 padding) 开始想外裁剪背景；
  • border-box: 从 border 区域（不含 border) 开始向外裁剪背景
  • bontent-box: 从 content 区域开始向外裁剪背景
  • text: 从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此极客实现使用背景作为填充色之类的遮罩效果。
css
.pic{
	width:200px;
  height:1600px;
  background:url('../xx.png');
  background-size:300px 300px
  /*  x轴  y轴 */
}
1
2
3
4
5
6
7

设置背景图像的参考原点（位置）

background-orign

  • padding-box: 从 padding 区域（含 padding) 开始显示背景图像
  • border-box: 从 border 区域（含 border) 开始显示背景图像
  • content-box: 从 content 区域开始显示背景图像

image.png

CSS3 新增

线性渐变

linear-gradient

  • linear-gradient([《起点》||《角度》,]?《点》,《点》...)
  • 只能用背景上
  • 颜色是沿着一条直线轴变化
  • 参数
    • 起点：从什么方向开始渐变
      • left、top、left top
    • 角度：丛书名角度开始渐变
      • xxx deg 的形式
    • 点：渐变点的颜色和位置
      • red 50%, 位置可选
  • 重复线性渐变

image.png

径向渐变

background: radial-gradient(shape size at position, start-color, ..., last-color);

shape确定圆的类型：
- ellipse （默认）: 指定椭圆形的径向渐变。
- circle ：指定圆形的径向渐变
size定义渐变的大小，可能值：
- farthest-corner （默认） : 指定径向渐变的半径长度为从圆心到离圆心最远的角
- closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
- closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
- farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
position定义渐变的位置。可能值：
- center（默认）：设置中间为径向渐变圆心的纵坐标值。
- top：设置顶部为径向渐变圆心的纵坐标值。
- bottom：设置底部为径向渐变圆心的纵坐标值。
start-color, ..., last-color用于指定渐变的起止颜色。
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
    background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>

<h3>径向渐变 - 颜色结点不均匀分布</h3>
<div id="grad1"></div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

image.png

滤镜

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

注意： 滤镜通常使用百分比 （如：75%), 当然也可以使用小数来表示 （如：0.75)。

Filter描述
none默认值，没有效果。
blur(px)给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；

如果没有设定值，则默认是 0；这个参数可设置 css 长度值，但不接受百分比值。
brightness(%)给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是 0%，图像会全黑。值是 100%，则图像无变化。其他的值对应线性乘数效果。值超过 100% 也是可以的，图像会比原来更亮。如果没有设定值，默认是 1。
contrast(%)调整图像的对比度。值是 0% 的话，图像会全黑。值是 100%，图像不变。值可以超过 100%，意味着会运用更低的对比。若没有设置值，默认是 1。
drop-shadow(h-shadow v-shadow blur spread color)给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受<shadow>（在 CSS3 背景中定义）类型的值，除了"inset"关键字是不允许的。该函数与已有的 box-shadow box-shadow 属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。<shadow>参数如下：
<offset-x> <offset-y> （必须）
这是设置阴影偏移量的两个 <length>值。<offset-x> 设定水平方向距离。负值会使阴影出现在元素左边。<offset-y>设定垂直距离。负值会使阴影出现在元素上方。查看<length>可能的单位。如果两个值都是 0, 则阴影出现在元素正后面 （如果设置了 <blur-radius> and/or <spread-radius>，会有模糊效果）.
<blur-radius> （可选）
这是第三个 code><length>值。值越大，越模糊，则阴影会变得更大更淡。不允许负值 若未设定，默认是 0 （则阴影的边界很锐利）.
<spread-radius> （可选）
这是第四个 <length>值。正值会使阴影扩张和变大，负值会是阴影缩小。若未设定，默认是 0 （阴影会与元素一样大小）.
注意：Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。
<color> （可选）
查看 <color>该值可能的关键字和标记。若未设定，颜色值基于浏览器。在 Gecko (Firefox), Presto (Opera) 和 Trident (Internet Explorer) 中， 会应用 color 属性的值。另外，如果颜色值省略，WebKit 中阴影是透明的。
grayscale(%)将图像转换为灰度图像。值定义转换的比例。值为 100% 则完全转为灰度图像，值为 0% 图像无变化。值在 0% 到 100% 之间，则是效果的线性乘子。若未设置，值默认是 0；
hue-rotate(deg)给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为 0deg，则图像无变化。若值未设置，默认值是 0deg。该值虽然没有最大值，超过 360deg 的值相当于又绕一圈。
invert(%)反转输入图像。值定义转换的比例。100% 的价值是完全反转。值为 0% 则图像无变化。值在 0% 和 100% 之间，则是效果的线性乘子。 若值未设置，值默认是 0。
opacity(%)转化图像的透明程度。值定义转换的比例。值为 0% 则是完全透明，值为 100% 则图像无变化。值在 0% 和 100% 之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是 1。该函数与已有的 opacity 属性很相似，不同之处在于通过 filter，一些浏览器为了提升性能会提供硬件加速。
saturate(%)转换图像饱和度。值定义转换的比例。值为 0% 则是完全不饱和，值为 100% 则图像无变化。其他值，则是效果的线性乘子。超过 100% 的值是允许的，则有更高的饱和度。 若值未设置，值默认是 1。
sepia(%)将图像转换为深褐色。值定义转换的比例。值为 100% 则完全是深褐色的，值为 0% 图像无变化。值在 0% 到 100% 之间，则是效果的线性乘子。若未设置，值默认是 0；
url()URL 函数接受一个 XML 文件，该文件设置了 一个 SVG 滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。
例如：filter: url(svg-url#element-id)
initial设置属性为默认值
inherit从父元素继承该属性

遮罩

mask 和 background 用法是相仿的，mask 的值有这些

image.png

mask-clip
mask-composite
mask-image
mask-mode
mask-origin
mask-position
mask-repeat
mask-size
mask-type
1
2
3
4
5
6
7
8
9
html
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">

  <style>
    .mask{
        width:475px;
        height:260px;
        background-image:url("http://img.blog.csdn.net/20170701221659356");

        /* 取值是图片路径 */
        -webkit-mask-image:url("http://img.blog.csdn.net/20170701221732018");
    }
  </style>
 </head>
 <body>
    <div class="mask"> </div>
 </body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Copyright © 2018-2025 Mason

沪ICP备20006251号-1