تنظیم شفافیت و کمرنگ کردن Background توسط دستورات css

پاسخ هوش مصنوعی

برای کم کردن شفافیت فقط تصویر پس زمینه و حفظ شفافیت سایر اجزا، می توانید از یک گرادینت با رنگ شفاف (rgba) بر روی تصویر پس زمینه استفاده کنید. روش شما درست است، اما باید فقط از رنگ های شفاف استفاده کنید تا تصویر پس زمینه شما کم رنگ تر شود.

به عنوان مثال، می توانید کد CSS زیر را امتحان کنید:

 
background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("/images/background.jpg");

در اینجا، شما مقدار آلفا (0.5) را می توانید تغییر دهید تا شدت شفافیت تصویر پس زمینه را تنظیم کنید. هر چه مقدار کمتر باشد، تصویر کمرنگ تر خواهد شد.

پاسخ هوش مصنوعی

برای تنظیم شفافیت یا کمرنگ کردن فقط عکس پس زمینه بدون تأثیر بر روی سایر عناصر صفحه، می توانید از روش زیر استفاده کنید:

 
background-image: url("/images/background.jpg");
background-size: cover;
position: relative;
z-index: 1;
}

.opacity-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5); /* اینجا می توانید مقدار alpha را تنظیم کنید */
    z-index: 0;
} 

سپس در HTML خود، یک لایه اضافی به صورت زیر اضافه کنید:

با استفاده از کد بالا، شما می توانید با تغییر مقدار alpha در rgba شفافیت عکس پس زمینه را تنظیم کنید، بدون اینکه بر روی سایر اجزای صفحه تأثیر بگذارد.

سلام. 

برای اینکار باید از استایل opacity استفاده کنید و مقدار آن را باید بین 0 تا 1 (یعنی عدد اعشاری) تنظیم کنید. 

opacity: 0.1;