HTML implements a background image like Baidu's homepage effect (code)-HTML Tutorial-php.cn

HTML implements a background image like Baidu's homepage effect (code)

不言

Release： 2018-10-24 16:54:03

forward

2666 people have browsed it

The content of this article is about realizing a background image (code) in HTML that looks like Baidu’s homepage. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

I knew I had asked this question on Baidu before, and it was later solved. But many people came to me and asked me how to solve it and the source code.
it's actually really easy. I'll post the code here. Friends who need it don't need to add me on QQ, just come here to pick it up.

The pictures inside were randomly found by me.

<!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(http://pic1.win4000.com/wallpaper/b/589d687069ed9.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>

Copy after login

The above is the detailed content of HTML implements a background image like Baidu's homepage effect (code). For more information, please follow other related articles on the PHP Chinese website!