Rumah > Artikel > hujung hadapan web > Bagaimana untuk membuat latar belakang beralun menggunakan CSS?

Bagaimana untuk membuat latar belakang beralun menggunakan CSS?

藏色散人asal: 2021-08-20 14:25:322767semak imbas

Dalam artikel ini "Gunakan CSS untuk mencipta imej latar belakang kabur lanjutan dengan cepat", saya memperkenalkan kepada anda cara menggunakan CSS untuk mencipta imej latar belakang kabur lanjutan dengan cepat. Rakan yang berminat boleh pergi dan mempelajarinya lebih kurang !

Nota: Artikel ini akan menggunakan pemilih sebelum untuk menjana latar belakang gelombang dengan mudah dan akan menggunakan imej gelombang dalam format fail .png, yang boleh dibuat sendiri atau dimuat turun dari

di sini

Mari kita mulakan dengan kod terus:

Kesannya adalah seperti berikut:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
 "width=device-width, initial-scale=1.0" />

    <title>
        如何使用CSS创建波浪背景 ?
 </title>

    <style>
        body {
            padding: 0%;
            margin: 0%;
        }

        .demo {
            padding: 200px;
            text-align: center;
        }

        section {
            width: 100%;
            min-height: 300px;
        }

        .pattern {
            position: relative;
            background-color: #3bb78f;
            background-image: linear-gradient(315deg,
            #3bb78f 0%, #0bab64 74%);
        }

        .pattern:before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 250px;
            background: url(
            https://img.php.cn/upload/article/000/000/020/611f4b147b431604.png);
            background-size: cover;
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
<section class="pattern">
    <div class="demo">
        <h1>PHP中文网</h1>
    </div>
</section>
</body>

</html>

Bagaimana untuk membuat latar belakang beralun menggunakan CSS? Dalam kod di atas, mula-mula, kami akan menambah latar belakang asas pada bahagian ini, dan kemudian gunakan pemilih sebelum untuk menetapkan fail png gelombang di atas latar belakang kami untuk mencapai kesan latar belakang gelombang!

Nota: Teg

mentakrifkan bahagian (bahagian, bahagian) dalam dokumen. Seperti bab, pengepala, pengaki atau bahagian lain dokumen. (Teg

baharu dalam HTML 5.), dan semua penyemak imbas menyokong teg

Pemilih

<section></section>

menyisipkan kandungan sebelum kandungan elemen yang dipilih. (Gunakan atribut kandungan untuk menentukan kandungan yang hendak disisipkan.), dan untuk :sebelum dalam IE8 dan sebelumnya,

:beforePlatform laman web PHP Cina mempunyai banyak sumber pengajaran video Selamat datang semua orang untuk mempelajari "

tutorial video css

Atas ialah kandungan terperinci Bagaimana untuk membuat latar belakang beralun menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

php css html 选择器

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Perbincangan ringkas tentang atribut latar belakang baharu & fungsi kecerunan (kecerunan) dalam CSS3Artikel seterusnya：Perbincangan ringkas tentang atribut latar belakang baharu & fungsi kecerunan (kecerunan) dalam CSS3

Artikel berkaitan

Lihat lagi