【HTML+CSS】锚点链接、透明度、滤镜

锚点链接

同一个页面不同位置的跳转

<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="">