فیلتر دادن به تصویر background

جامعه‌ها وبلاگ شروع یادگیری برنامه نویسی

سلام. می‌خواستم بدونم وقتی یک تصویر رو به عنوان بکگراند انتخاب کردیم، چجوری می‌تونیم بهش یک فیلتر بدیم؟

درود

با استفاده از پراپرتی background-filter

میتونید این مثال رو بررسی کنید.

نازنین کریمی مقدم ۰۹ بهمن ۱۴۰۱، ۰۵:۴۷

منظور من بکگراند برای کل صفحه است و با پراپرتی backdrop-filter هم کار کردم اما یک سوم صفحه فیلتر نداشت. کد رو در پایین می‌گذارم:

کد html:

html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meno projecttitle>
    <link rel="stylesheet" href="../css/style.css">
head>
<body>
    <form class="form" action="" method="" enctype="">
        <h2>ورود به سایتh2>
        <label for="name">نام کاربریlabel>
        <input type="text" class="name" value="">
        <label for="password">رمز عبورlabel>
        <input type="text" class="password" value="">
        <button type="submit">ورودbutton>
    form>
body>
html>

کد قسمت css:

body {
  background-image: url(../img/background.jpg);
  background-size: cover;
  backdrop-filter:blur(5px) ;
}
form{
    width: 400px;
    height: 400px;
    background-color: rgb(44, 43, 43);
    margin: 140px auto;
    padding: 10px;
}
form h2{
    color: rgb(224, 223, 223);
    text-align: center;
    padding: 20px 0 30px 0;   
}
form label{
    color: rgb(233, 233, 233);
}
form input{
    display: block;
    width: 100%;
    margin-bottom: 20px 0 ;
}

و همچنین نتیجه:

Mohammad Hasan Habibi ۰۹ بهمن ۱۴۰۱، ۱۴:۵۵

ببینید، کلا هیچ وقت مستقیم فیلتر و مواردی از این دست رو مستقیم به بکگراند ندید. باعث کندی سایت و دیرلود شدن و در نهایت بازخورد منفی کاربر و شکست سئو میشه.

اگر میخواید کل صفحه اعمال بشه، مشابه مثالی که لینک کرده بودم پیش برید، بعد اون div درونی که بهش فیلتر داده شده بود رو ابعادش رو طوری ست کنید که تمام صفحه بشه (مثلا در همون مثال مارجین رو بردارید و پدینگ رو 400 بگیرید). نتیجه هم مشابه با کاری هست که میخواید با back-drop انجام بدید.

نازنین کریمی مقدم ۰۹ بهمن ۱۴۰۱، ۲۳:۴۸

اگر خود background-image رو به body بدیم باعث کندی نمی‌شه؟

Mohammad Hasan Habibi ۱۰ بهمن ۱۴۰۱، ۱۱:۳۵

باید در حالات مختلف تست بشه و اگر باعث کندی شد، div اونم جدای body باشه.

بهترین پاسخ

نازنین کریمی مقدم ۱۰ بهمن ۱۴۰۱، ۱۴:۳۴

ممنون

Mohammad Hasan Habibi ۱۱ بهمن ۱۴۰۱، ۱۳:۳۱