锚点链接
同一个页面不同位置的跳转
<style>
div{
width: 80%;
height: 1990px;
background-color: pink;
margin: auto;
}
</style>
<div id="return">这里是顶部</div>
<p><a href="#return">返回顶部</a></p>
不同页面某一个位置的跳转
直接在超链接后面加#锚点名字
<p><a href="./001-task10.html#new">跳转</a></p>
<p id="new">跳转到这里</p>
透明度
opcity 0-1
- 0 透明
- 1 不透明
opcity: 0
- 元素以及内容物全部消失不可见
- 仍然占据空间
- 结果不可逆(例如给子元素设置opcity: 1无效)
兼容ie低版本浏览器
filter: alpha(opacity=30) opacitiy取值0-100 0不透明 100透明
<style>
.father{
width: 300px;
height: 300px;
background-color: green;
opacity: 0;
}
.son{
width: 200px;
height: 200px;
background-color: blue;
/* 无效 */
opacity: 1;
}
.other{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<div class="father">
<div class="son"></div>
</div>
<div class="other"></div>
滤镜-filter
- 灰色滤镜
- filter: grayscale(80%)
- 高斯模糊
- filter: blur(5px)
<style>
html{
filter: grayscale(80%);
}
body{
filter: blur(2px);
}
</style>
<div>123123</div>
<img src="./image/001.png" alt="">