mmj-sys
3 سال پیش توسط mmj-sys مطرح شد
8 پاسخ

ایجاد بکگراند در ری اکت

سلام دوستان
این ری اکت لعنتی چرا مثه ادم بکگرااند نمی گیره هر روشی رو امتحان کردم
ارور هم نمیده تو devtools همه چی درسته تصویر لود شده المنت درسته
با تک img تست کردم
با تگ div هم تست کردم
فقطو فقط با تگ body شد
اونم من میخوام به بکگراند بلور بدم
اگه میشه کد هاتونو قرار بدید


ثبت پرسش جدید
محمد شامخی
تخصص : fullstack developer
@mohamadshamekhi 3 سال پیش آپدیت شد
0

@mmj.sys
باید

background-repeat:no-repeat;
background-size:cover:

که هم تکرار نشه هم همه ی صفحه رو بگیره

فیکس صفحه باشه یا فیت؟
اگه فیکس میخوای باشه

position:fixed; 

اسفتاده کن


محمد شامخی
تخصص : fullstack developer
@mohamadshamekhi 3 سال پیش مطرح شد
0

@mmj.sys

سلام وقت بخیر
مشکلی با style نداره
دو نوع استایل خدمت شما خدمت شما

      <div style={{ backgroundColor: "red" }}>hello</div>

و به این صورت

const styles = {
  backgroundColor: "red"
}
export default function App() {
  return (
    <>
      <div style={styles}>hello</div>
    </>
  );
}

mmj-sys
تخصص : داش متخصص چیه من پروفسورم .
@mmj.sys 3 سال پیش مطرح شد
0

@mohamadshamekhi

سلام ممنونم از پاسختون
اما من میخوام تصویرم رو کل صفحه باشه مشکلم استایل المنت نیست
وقتی رو body اعمال کنم میشه اما میخوام بگکراندم بلور باشه برا همین نمیشه روی body اعمالش کرد
اگر روی روی المنت دیگه ای هم باشه باعث میشه عکس تمام صفحه نشه


سعید
تخصص : برنامه نویس وب
@Saeeed 3 سال پیش مطرح شد
0

@mmj.sys کد هات رو بذار ببینیم


محمد شامخی
تخصص : fullstack developer
@mohamadshamekhi 3 سال پیش مطرح شد
0

@mmj.sys
بله درسته شما برای این کار هم میتونین برای مثال از یک div جدا توی صفحه استفاده کنین برای مثال با این style

 <div style={{ position: "relative",zIndex:10 }}>
        hello

      </div>
      <div
          style={{
            zIndex:0,
            backgroundColor: "red",
            filter: "blur(50px)",
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%"
          }}
        ></div>

هم میتونین نسبت به با از after یا before استفاده کنین که برای مثال اگر overlay میخواین بدین خیلی بهتره و پیشنهاد من after یا before هستش

اگر هم نه کلا میخواین یه کاره دیگه انجام بدین دقیق تر بگین میخواین چیکار کنین تا بتونم بیشتر راهنمایی کنم


فاطمه کاظمی زاده
تخصص : Senior front-end در هولدینگ دک...
@kazemi 3 سال پیش آپدیت شد
0

بلور دادن به بک گراند امکان پذیر نیست دوست عزیز
بلور شدن فقط میشه به تگ ها و به عکس داد
به بک گراند نمیشه بلور داد
مگر اینکه برای اون المنت یک before ایجاد کنین
اونو ابسولوت کنین و توی کل کادر مورد نظرتون بکشید
بعد اون بیفور را بلور کنین


mmj-sys
تخصص : داش متخصص چیه من پروفسورم .
@mmj.sys 3 سال پیش مطرح شد
0

@Saeeed

import './App.css';

function App() {
  return (
    <div>
      <div className="header">
        <h1 className="h1">title</h1>
      </div>
     <div
         style={{
           zIndex:-1,
           backgroundImage: "url('http://localhost:8080/rand')",
           filter: "blur(10px)",
           position: "absolute",
           top: 0,
           left: 0,
           width: "100%",
           height: "100%"
         }}
       ></div>
    </div>

  );
}

export default App;

الان این کد به من بلور بکگراند رو میده
اما میخوام
repeat نداشته باشه و فیکس صفحه باشه


علیرضا کفایتی
تخصص : برنامه نویس laravel, vue.js
@alirezakefayati 3 سال پیش مطرح شد
0

سلام
من اصلا ری اکت کار نکردم و بیشتر بک اند کار هستم . اما احتمال میدم این موضوع مشابه css باشه . پس بهتره مقدار background-repeat:no-repeat; رو بهش بدید . حالا هر جوری که باید تو ری اکت نوشته بشه .


محمد شامخی
تخصص : fullstack developer
@mohamadshamekhi 3 سال پیش آپدیت شد
0

@mmj.sys
باید

background-repeat:no-repeat;
background-size:cover:

که هم تکرار نشه هم همه ی صفحه رو بگیره

فیکس صفحه باشه یا فیت؟
اگه فیکس میخوای باشه

position:fixed; 

اسفتاده کن


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام