آموزش مات کردن تصویر با css

آموزش مات کردن پس زمینه یک تصویر در سایت

در این مقاله می آموزید که چطور با استفاده از CSS و Html یک تصویر پس زمینه مات ایجاد کنید.

قدم اول : کد HTML را اضافه کنید.
مثال :

                < div class="bg-image">< /div>
                < div class="bg-text">
                < h2>پس زمینه تار< /h2>
                < h1>دوره آموزش طراحی سایت< /h1>
                < p>حضوری و آنلاین< /p>
                < /div>
                

قدم دوم :   کد CSS را اضافه کنید.
مثال :

        body, html {
            height: 100%;
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
        }

        * {
            box-sizing: border-box;
        }

        .bg-image {
            /* The image used */
            background-image: url("https://www.tahlildadeh.com/Files/PageInfo/webdesignslider2024-03-06-11-13-45.webp");
            /* Add the blur effect */
            filter: blur(8px);
            -webkit-filter: blur(8px);
            /* Full height */
            height: 100%;
            /* Center and scale the image nicely */
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        /* Position text in the middle of the page/image */
        .bg-text {
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
            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;
            border-radius:9px;
            
        }

                

خروجی Blurred Background