秦小

CSSMM4E 笔记 - 2.08 - 为网页添加生动的图片

发表于 | 分类于

免费图片

<img>标签

<img> 最常用的属性: border padding float margin border-radus

作为背景的图片

1
2
3
4
5
6
7
body {
  background-image: url(images/bg.png);
}
url(../images/bg.png) /* document-relative */
url(/images/bg.png)   /* root-relative */
url('/images/bg.png') /* quotes or not both ok */
url("/images/bg.png")

GIF JPEG PNG SVG

  • GIF (Graphics Interchange Format): 动态图
  • JPEG(Joint Photographic Experts Group): 色彩丰富, 适于照片
  • PNG (Portable Network Graphics)
    • png8 取代gif;
    • png24, png32比jpeg色彩更丰富,但体积更大;
    • png提供alpha通道;
  • SVG (Scalable Vector Grphic)

控制重复

1
2
3
{
  background-repeat: repeat(D) | no-repeat | repeat-x | repeat-y | round | space;
}
  • round 使图片变形来填满背景(下图左);
  • space 不变形图片, 在重复图片间填充space来铺满背景(下图右).

定位背景图片

简单定位

1
2
3
4
5
6
{
  background-postion: {left center right} {top center bottom};
  background-postion: 5px 8px;
  background-postion: 20% 80%;
  background-postion: 5px 50%;
}

固定图片位置(不滚动)

1
2
3
{
  background-attachment: fixed | scroll(D);
}

背景的原点和裁剪

1
2
3
4
{
  background-origin: boder-box(D) | padding-box | content-box;
  background-clip: boder-box(D) | padding-box | content-box;
}

缩放背景图片

1
2
3
4
5
6
7
{
 background-size: 100px 200px;
 background-size: 100px auto; /* keep aspect ratio */
 background-size: 100% 100%;  /* scall to fit the background */
 background-size: contain;    
 background-size: cover;
}

contain: forces the image to resize to fit the background space of the page element while maintaing the aspect ratio of the image.
cover: forces the width of the image to fit the width of the element and the height of the image to fit the height of the element, without changing the aspect of the image.

Background 属性速记法

1
2
3
4
5
6
{
  background: img postiton(x,y)/size repeat origin clip attachment color; 
}
body {
  background: url(bullseye.gif) center center / 50% no-repeat fixed #FFF;
}

为滚动设置多个背景图片

1
2
3
4
5
{
  background: url(scrollTop.jpg) center top no-repeat,
              url(scrollBottom.jpg) center bottom no-repeat,
              url(scrollMiddle.jpg) center top repeat-y;
}

渐变背景

线性渐变

1
2
3
4
5
6
7
8
9
10
11
12
{
background-image: linear-gradient(to right, black, white);
background-image: linear-gradient(to bottom right, black, white);
background-image: linear-gradient(135deg, rgb(0,0,0), white);
background-image: linear-gradient(135deg, black, rgb(255,255,255), HSL(0,0%,0%) ...);
background-image: linear-gradient(to right, #900, #FC0 10%, 3FC0 90%, #900);
background-image: linear-gradient(to right, #900 20%, #FC0 30%, 3FC0 70%, #900 80%);
background-image:
  line-gradient(cyan, transparent),
  line-gradient(255deg, magenta, transparent),
  line-gradient(45deg, yellow, transparent);
}

重复线性渐变

1
2
3
4
5
6
7
8
9
10
{
  background-image: repeating-linear-gradient(45deg, c1 atp1, c2 atp2, c3 atp3);
  /* 下图 左 */
  background-image: repeating-linear-gradient(45deg, #900 20px, #FC0 30px, #900 40px);
  /* 下图 右 */
  /* SOLID strips: 0-10px -> solid #900; 10-20px -> solid FC0 */
  background-image: repeating-linear-gradient(45deg, #900 0, #900 10px, #FC0 10px, #FC0 20px);
}

径向渐变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  /* top left */
  background-image: radial-gradient(red, blue);
  /* top right */
  background-image: radial-gradient(circle, red, blue);
  /* middle left ?????? */
  background-image: radial-gradient(circle at 20% 40%, red, blue);
  /* middle left */
  background-image: radial-gradient(closest-side circle at 20% 40%, red, blue);
  /* middle right */
  background-image: radial-gradient(closest-corner circle at 20% 40%, red, blue);
  /* bottom left */
  background-image: radial-gradient(farthest-side circle at 20% 40%, red, blue);
  /* bottom right */
  background-image: radial-gradient(farthest-corner circle at 20% 40%, red, blue);
  /* color stops */
  background-image: radial-gradient(circle at 20% 40%, red 20%, orange 80%, yellow);
}

重复径向渐变

1
2
3
{
  background-image: repeating-radial-gradient(circle, red 20px, orange 30px, yellow 40px, red 50px);
}