一张图片的演示
附加:Mac OS 截屏快捷键:
Command+Shift+3
Mac OS 选取截屏:
Command+Shift+4
一、一开始的div框架
html:
<div class="one">
<img src="" alt=""><!--之后把这段去掉-->
</div>
css:
.one{
position: relative;
width: 206px;
height:116px
}
.one:before{
content: "";/*这个参数比较重要*/
position: absolute;
z-index: 1;
bottom: 0;/*这个把它定义到最底下*/
left: 0;
width: 100%;
height: 48px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAwCAYAAAGnNCAXAAAABGdBTUEAALGPC/xhBQAAAENJREFUCB1jYGBgYGICEpIgQgqNBRRi4MMmARYDyXKAWLwgggfOAnMJiIH0soJ0sMEJdlQWWBYshpAAK0ZwwSzS1AEAes8Ckyqvlc0AAAAASUVORK5CYII=);/*这个参数比较重要*/
background-size: contain;
background-repeat: repeat-x;
border-radius:0 0 2px 2px
}
得到的效果:
二、填补
html:
<div class="one">
<div class="two">
<img src="" alt="">
</div>
</div>
css:
.one .two{
position: relative;
overflow: hidden;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABHCAMAAAB4UkqjAAAAh1BMVEUAAADd3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d0UCIZXAAAALHRSTlMAoJDx4OYL/DcGF+6+JNi4ycSIT2k6LPeWfRzTVPXPszEQrV0hpo12cEZAZFpRNIQAAAJVSURBVFjD7dbZcpswGIbhHwwSi81q8Ib33fnu//oatRIpmliDhQ/aaZ+TKInnjVgkhb4RJMhP9Fzo8PiD+vEA+JPnqS0+1dRHBJhibAzh2HNeekxP9Z8XBSMZM6SmRBYx65QeM6XsY3rKPqanLGMWqeDmOh0b/Io9+YHi3gKtdExgLznSlyjFMGnUphIMlcgY22C4DSPBxTu4IrXDe+yI6IDWbPSqGVoHoohDyip6XZVB4hFN1TgPyUaYQ5rSWQ0nZGcC6UyJukKypa4yIXX3HLLlqCdHX++HLRfS/9bbWvvHLSLNR3N6tRXdFwdxejekiYF4fDnWYa/WqSm2PqRCSy0hrbP5RxAaW8141N17tVbZ+S1fFYbWFF2+1lqg62BoBdAsqWOLroWhxTh+M8vmWuuaxp1WaWjRSn43yl35sHTLUjxiaWlqnYE4LZoJme3v13MibqepFZRL6otV5V+/Hv+xVvi+FsvZG1qh/LQ7uFXnF/HlwcEfYlDktW2r5EARUiXWc1xRWAC8tGwxsdJ9dcRnYrddMdtrjDZyAy3kXrSJ7O89u8zEZAIKxBRnFzbonWD3ZkfCrrmzP+6979nicjAnW3NZ4OS1R6GtVBa8drTek539up3NAgMvcv51WNZQitCiFBZQaqIMSrx1XrWNoWTy/w1r+hk+xjuMSVjGGC6WZ3S1xlDriqTKxzB+Ra3I4bDHne62drqmied57QR9z0D94dHnOEmvJ/pWAMm4ovL2TTcJ5cRyMlHrbkdG5c/5r82fYqt+K/iR89m2JrP9PEZyI80PsPxVT0P3FAEAAAAASUVORK5CYII=);/*有阴影,必要*/
background-repeat: no-repeat;
background-position:50%
}
.one .two, .one .two:before, .one .two img{
width: 100%;
height: 100%;
border-radius:2px
}
前面那段background-image: url()没有的效果:
有后的效果:
三、重点之一:图片上的背景操作
css:
.one .two:before{
content: "";
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, .7);/*背景颜色*/
opacity: 0;/*透明程度*/
transition:opacity .2s/*动画时间效果*/
}
.one:hover .two:before{
opacity: 1;/*最主要之一*/
}
特效:
这就完成一半了
四、文字的标题:
html:
<div class="one">
<div class="two">
<img src="" alt="">
<div class="three_text">
<p style="color:white;">stay</p>
<!--p中style为了看清楚才加上的,中后去掉,之后用class=""-->
</div>
</div>
</div>
css:
.one .two .three_text{
position: absolute;/*绝对定位*/
z-index: 2;/*数字越大,显示在小的数字样式上*/
width: 100%;
top: 55px;/*自行尝试更改位置*/
left: 0;
transition: top .2s;
padding:26px 10px 10px
}
.one:hover .two .three_text{
top:-15px;/*自行尝试更改位置*/
}
效果为:
至于位置更改上处俩处top即可
五、字体修改:
html:
<div class="one">
<div class="two">
<img src="" alt="">
<div class="three_text">
<p class="title">stay</p>
</div>
</div>
</div>
css:
.two .three_text .title{
font-size: 14px;/*字体大小*/
line-height: 18px;
height: 18px;
color: #fff;
margin-bottom: 6px;/*底部对齐*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight:500
}
.one:hover .two .three_text .title{
height: 36px;
white-space: normal
}
body{
font: 12px -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
-webkit-font-smoothing:antialiased;/*定义字体粗细*/
}
p{
display: block;/*局部区域不可见*/
/*位置*/
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
改前:
改后:
六、尝试bilibili特殊字符编写:
html:
<p class="p_up">
<i class="iup zidingyi_up"></i>
</p>
css:
.zidingyi_up:before{
content: "\E741";/*特殊字符,但不能显示*/
}
.p_up .iup{
vertical-align: middle;
margin-right:5px
}
.p_up{
display: -ms-flexbox;
display: flex;
font-size: 12px;
color: #999;
line-height:16px
}
效果为:
最终特殊字符还是没搞出来(但得到的结论是与p_up(主要)和iup有关)