css世界例子学习记录

发表于

标签： css 笔记


此文作为个人阅读css世界的记录。

这是简单给图片添加透明遮罩层效果。

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .imgbox{
            width:200px;
            height: 140px;
            position:relative;
            overflow: hidden;
        }
        img{
            width:100%;
        }
        .imgbox:after{
            position:absolute;
            /* 不能少 */
            left: 0;
            top:0;
            bottom: 0;
            right: 0;
            display: block;
            width:50%;
            height: 50%;
            background-color: rgba(0, 0, 0, 0.5);
            content: attr(data-text);
            /* 应用了css世界p97中同时实现竖直和水平居中方法 */
            margin:auto;
            text-align: center;
            /* 设置文字竖直居中 */
            line-height: 70px;
            transition: all 1s ease;
            /* 改变遮罩层位置 */
            transform: translateY(150%);
            color: #FFF;
        }
        .imgbox:hover:after{
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <div class="imgbox" data-text="hello">
            <img src="./1.jpg" alt="">
    </div>
</body>
</html>

通过alt在图片还没加载就显示提示信息，还有用content更换图片。

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style media="screen">
   div{
     text-align: center;
   }
   img {
  display: inline-block;
  width: 256px; height: 192px;
  /* 隐藏Firefox alt文字 */
  color: transparent;
  position: relative;
  overflow: hidden;
}

img:not([src]) {
    /* 隐藏Chrome alt文字以及银色边框 */
    visibility: hidden;
}

img::before {
    /* 淡蓝色占位背景 */
    content: "";
    position: absolute; left: 0;
    width: 100%; height: 100%;
    background-color: #f0f3f9;
    visibility: visible;
}

img::after {
    /* 黑色alt信息条 */
    content: attr(alt);
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    line-height: 50px;
    text-align: center;
    background-color: rgba(0,0,0,.5);
    color: white;
    font-size: 14px;
    transform: translateY(100%);
    /* 来点过渡动画效果 */
    transition: transform .5s;
    visibility: visible;
}

img:hover::after {
    transform: translateY(0);
}

.gal:hover {
    content: url(1.png);
}
   </style>
 </head>
 <body>
   <div>
   <img alt="沉思图" data-src="1.jpg">
  <p><button>设置src属性显示图片</button></p>
  <img class="gal" src="1.jpg">
</div>
  <script type="text/javascript">
  var eleButton = document.querySelector('button'),
  eleImg = document.querySelector('img');

if (eleButton && eleImg) {
  var initValueButton = eleButton.innerHTML;
  // 图片地址 先把图片地址保存在srcImage中
  var srcImage = eleImg.getAttribute('data-src');
  // 移除该属性
  eleImg.removeAttribute('data-src');
  // 按钮点击事件
  eleButton.addEventListener('click', function() {
      if (this.innerHTML == initValueButton) {
        //改变按钮
          this.innerHTML = '移除src属性';
          //添加src属性显示图片
          eleImg.setAttribute('src', srcImage);
      } else {
        //改变按钮
          this.innerHTML = initValueButton;
          // src属性移除
          eleImg.removeAttribute('src');
      }
  });
}
  </script>
 </body>
 </html>