Cepat cipta imej latar belakang kabur lanjutan dengan CSS-tutorial css-php.cn

Cepat cipta imej latar belakang kabur lanjutan dengan CSS

藏色散人

Lepaskan： 2021-08-19 11:24:31

asal

2541 orang telah melayarinya

Adakah anda mahu halaman web anda kelihatan mewah? Ingin meningkatkan bilangan lawatan membaca ke halaman web anda? Adakah anda mahu pengguna anda tertarik ke halaman anda pada pandangan pertama? Kemudian jangan ketinggalan artikel ini! Lagipun, sesiapa sahaja boleh belajar cara mencipta imej latar belakang kabur mewah dengan mudah dan cepat!

Tanpa berlengah lagi, mari mulakan!

Seperti tajuknya, apa yang akan kami perkenalkan hari ini ialah mencipta imej latar belakang kabur melalui CSS, yang sesuai untuk halaman blog peribadi dan latar belakang laman web anda.

Saya akan terus menambah kod di bawah:

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title></title>
<style>
    body, html {
        height: 100%;
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
    }
    * {
        box-sizing: border-box;
    }
    .bg-image {
        /* 所使用的图像 */
        background-image: url("001.jpg");

        /* 添加模糊效果 */
        filter: blur(8px);
        -webkit-filter: blur(8px);

        /* 完整的高度 */
        height: 100%;

        /* 中心和缩放图像*/
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    /* 将文本放置在页面/图像的中间 */
    .bg-text {
        background-color: rgb(0,0,0); 
        background-color: rgba(0,0,0, 0.4); 
        color: white;
        font-weight: bold;
        border: 3px solid #f1f1f1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        width: 80%;
        padding: 20px;
        text-align: center;
    }
</style>

</head>
<body>
<div class="bg-image"></div>
<div class="bg-text">
    <h2>欢迎来到</h2>
    <h1 style="font-size:50px">虚拟现实</h1>
    <p>一切都是虚拟的，但感觉还是真实</p>
</div>
</body>
</html>

Salin selepas log masuk

Kesannya seperti yang ditunjukkan di bawah:

Cepat cipta imej latar belakang kabur lanjutan dengan CSS

(Imej latar belakang datang dari Internet, maaf atas pemadaman)

Bagaimana pula! Bukankah kesannya hebat!

Jadi dalam kod di atas, saya akan memperkenalkan anda kepada beberapa atribut css utama:

filter Atribut mentakrifkan kesan visual elemen (biasanya Cepat cipta imej latar belakang kabur lanjutan dengan CSS ) (contohnya : kabur dan tepu).

Nota: Atribut "penapis" bukan standard yang disokong oleh versi lama Internet Explorer (4.0 hingga 8.0) telah ditamatkan. IE8 dan penyemak imbas yang lebih rendah biasanya menggunakan atribut kelegapan. Sifat

transform menggunakan transformasi 2D atau 3D pada elemen. Sifat ini membolehkan kita memutar, menskala, mengalih atau mencondongkan elemen.

border Harta trengkas yang menetapkan semua sifat sempadan dalam satu pengisytiharan.

border-width：规定边框的宽度。
border-style：规定边框的样式。
border-color：规定边框的颜色。
inherit：规定应该从父元素继承 border 属性的设置。

Salin selepas log masuk

background Harta trengkas menetapkan semua sifat latar belakang dalam satu pengisytiharan.

background-color：规定要使用的背景颜色。	
background-position：规定背景图像的位置。	
background-size：规定背景图片的尺寸。	
background-repeat：规定如何重复背景图像。
background-origin：规定背景图片的定位区域。	
background-clip：规定背景的绘制区域。	
background-attachment：规定背景图像是否固定或者随着页面的其余部分滚动。	
background-image：规定要使用的背景图像。	
inherit：规定应该从父元素继承 background 属性的设置。

Salin selepas log masuk

Platform tapak web PHP Cina mempunyai banyak sumber pengajaran video Selamat datang semua orang untuk mempelajari "tutorial video css"!

Atas ialah kandungan terperinci Cepat cipta imej latar belakang kabur lanjutan dengan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!