html实现像百度的首页效果一样的背景图(代码)

2020-07-18 19:41:10
本篇文章给大家带来的内容是关于html实现像百度的首页效果一样的背景图(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

之前在百度知道我提问过这一个问题,后来解决了。不过好多人来问我时怎么解决的,源码。
其实很简单。这里我贴一下代码。有需要的小伙伴不用再加我qq了,直接来这里取吧。

里面的图片是我随便找的。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>    html,    body {        height: 100%;    }    body {        margin: 0;        background-repeat: no-repeat;        background-size: cover;        background-position: center;        background-attachment: fixed;        background-image: url(https://www.easck.com/d/file/p/2020/07-18/202007181940341561.jpg);    }    h1{        height: 100%;        width: 100%;        margin: 0;        padding: 0;        color:#fff;        background-color: rgba(0,0,0,0.5);        display: -webkit-flex;        display: -moz-flex;        display: -ms-flex;        display: -o-flex;        display: flex;        justify-content: center;        align-items: center;    }    </style></head><body>    <h1>按住Ctrl+滚动滚轮:可以看到文字缩放,背景不动</h1></body></html>