# 图片处理

# 单行图片与文字垂直居中

<div><img src="./limin.jpg" width="100px" style="vertical-align:middle;"/>11111111111</div>

重点在属性：vertical-align:middle;

对于vertical-align:middle;属性，唯一值得注意的是，不要放在div中，因为<div>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。

对于一个图片和文字的高度相差无几的，不用这个样式也是可以的

# CSS斑马线

返回顶部

# 背景渐变动画

返回顶部

tbody tr:nth-child(odd) {
    background-color: #ccc;
}

1
2
3

bg {
    background-image: linear-gradient(#5187c4, #1c2f45);
    background-size: auto 200%;
    background-position: 0 100%;
    transition: background-position 0.5s;
}
bg:hover {
    background-position: 0 0;
}


background-image: linear-gradient( #83b842, #1c8a9f);

1
2
3
4
5
6
7
8
9
10
11
12

# 7个关于 CSS backgroundImage 好用的技巧

返回顶部

# 背景图如何才能完美适配视口

body {
  background-image: url('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2253&q=80');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

1
2
3
4
5
6
7
8
9
10

# 如何在CSS中使用多个背景图片

body {
  background-image: url(https://image.flaticon.com/icons/svg/748/748122.svg), url(https://images.unsplash.com/photo-1478719059408-592965723cbc?ixlib=rb-1.2.1&auto=format&fit=crop&w=2212&q=80);
  background-position: center, top;
  background-repeat: repeat, no-repeat;
  background-size: contain, cover;
}

1
2
3
4
5
6

# 如何创建一个三角形的背景图像

<body>
  <div class="day"></div>
  <div class="night"></div>
</body>

1
2
3
4

body {
  margin: 0;
  padding: 0;
}

div {
  position: absolute;
  height: 100vh;
  width: 100vw;
}

.day {
  background-image: url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2613&q=80");
  background-size: cover;
  background-repeat: no-repeat;
}

.night {
  background-image: url("https://images.unsplash.com/photo-1493540447904-49763eecf55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  background-size: cover;
  background-repeat: no-repeat;
  clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 如何将背景图像设置为文本颜色

使用background-image与background-clip

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  text-align: center;
  min-height: 100vh;
  font-size: 120px;
  font-family:Arial, Helvetica, sans-serif;
}

h1 {
   background-image: url("https://images.unsplash.com/photo-1462275646964-a0e3386b89fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2600&q=80");
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 图片不变形等比例缩放

img 只定义宽（或高）度可以等比例缩放，外面加个框，设置宽高和 overflow:hidden; 即可
在img标签里面只设置宽，不设置高，图片就会等比例缩放。
把图片作背景图片。background-position: center center
对图片使用max-width和max-height

# 图片重叠放置

利用flex布局space-around显示图片列表
在图片的外层加一个div，同时把勾选状态图标加进去

将图标设置为position:absolute绝对定位，再添加right:10%让图标往左移动，
将pic-block设置为position:relative相对定位，这种方法能达到完全的自适应。
图标的绝对定位让图标脱离文档流，使其不占用页面空间，flex布局的图片列表就能一直按照图片的空间（pic-block不设置width，其width由图片的width决定）进行弹性布局；
相对布局的pic-block能让绝对定位的图标以它作为父节点（绝对定位以最近的非static布局的元素作为父节点）。这两点使图标一直保持在图片的靠右边10%的位置。（推荐）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="pic-list">
        <div class="pic-block">
            <img id="picture1" onclick="checkPicture(this.id)" class="pic-block-img" src="./dist/background-img.jpg"/>
            <img id="picture1-checked" class="hidden" src="./dist/checked-small.png"/>
        </div>
        <div class="pic-block">
            <img id="picture2" onclick="checkPicture(this.id)" class="pic-block-img" src="./dist/background-img.jpg"/>
            <img id="picture2-checked" class="hidden" src="./dist/checked-small.png"/>
        </div>
        <div class="pic-block">
            <img id="picture3" onclick="checkPicture(this.id)" class="pic-block-img" src="./dist/background-img.jpg"/>
            <img id="picture3-checked" class="hidden" src="./dist/checked-small.png"/>
        </div>
    </div>
</body>
</html>

<style>
.pic-list {
  display: flex;
  height: 15.3vh;
  margin-bottom: 1.7vh;
  align-items: center;
  justify-content: space-around;
}
.pic-list .pic-block-img {
  height: 100%;
}
.pic-list .checked-small {
  height: 20%;
  position: absolute;
  bottom: 2%;
  right: 10%;
}
.pic-block {
  position: relative;
  height: 100%;
  margin: 0 auto;
}
.hidden {
  display: none;
}
</style>

<script>
let checkedPictures = new Set();
function checkPicture(id) {
    if(checkedPictures.has(id)) {
        checkedPictures.delete(id);
        document.getElementById(id+'-checked').setAttribute("class", "hidden");
    }
    else {
        checkedPictures.add(id);
        document.getElementById(id+'-checked').setAttribute("class", "checked-small");
    }
}
</script>

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66