فیلتر دادن به تصویر 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 ;
}

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

سوری آژند ۰۹ بهمن ۱۴۰۱، ۱۴:۵۵

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

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

جواد رحمانیان ۰۹ بهمن ۱۴۰۱، ۲۳:۴۸

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

سوری آژند ۱۰ بهمن ۱۴۰۱، ۱۱:۳۵

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

بهترین پاسخ

جواد رحمانیان ۱۰ بهمن ۱۴۰۱، ۱۴:۳۴

ممنون

سوری آژند ۱۱ بهمن ۱۴۰۱، ۱۳:۳۱