نمایش عکس ها (Image) به صورت نیمه شفاف (Transparent)، با مشخصه های opacity و filter:alpha ، در CSS

با استفاده از مشخصه های opacity و filter:alpha در CSS ، می توانیم عکس ها را به صورت نیمه شفاف (Transparent) نمایش دهیم.

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

همانطور که در کدها مشاهده می کنید، ما از دو مشخصه استفاده نموده ایم. آنها را برای تگ img که برای نمایش عکس به کار می رود ( کلید شماره 507 )، ذکر کرده ایم.

مشخصه opacity برای اکثر مرورگرهای اینترنت (به جز نسخه های قدیمی Internet Explorer) و مشخصه filter:alpha برای مرورگر اینترنت Internet Explorer (نسخه 8 و نسخه های پایین تر) می باشد.

بنابراین چنانچه قصد داریم که عکس در همه مرورگرهای اینترنت به صورت نیمه شفاف (Transparent) نمایش داده شود، حتما باید هر دو مشخصه را ذکر نماییم.

برای مشخصه opacity باید عددی بین 0 تا 1 را بنویسیم که هرچه این عدد به 0 نزدیک‌ تر باشد، عکس به صورت شفاف تر نمایش داده می شود (عکس به سمت ناپدید شدن پیش می رود).

برای مشخصه filter:alpha باید عددی بین 0 تا 100 را بنویسیم که هرچه این عدد به 0 نزدیک تر باشد، عکس به صورت شفاف تر نمایش داده می شود (عکس به سمت ناپدید شدن پیش می رود).

به مثال زیر توجه کنید :

مثال

بخش مهم کدها :

کد کامل صفحه HTML :

نتیجه :

مثال

بخش مهم کدها :

کد کامل صفحه HTML :

<!DOCTYPE html>
<html>
    <head>
        <style>
            img {
                width: 50%;
            }
            #kelidestan_1 {
                opacity: 0;
                filter: alpha(opacity=0); /* For IE8 and earlier */
            }
            #kelidestan_2 {
                opacity: 0.2;
                filter: alpha(opacity=20); /* For IE8 and earlier */
            }
            #kelidestan_3 {
                opacity: 0.4;
                filter: alpha(opacity=40); /* For IE8 and earlier */
            }
            #kelidestan_4 {
                opacity: 0.6;
                filter: alpha(opacity=60); /* For IE8 and earlier */
            }
            #kelidestan_5 {
                opacity: 0.8;
                filter: alpha(opacity=80); /* For IE8 and earlier */
            }
            #kelidestan_6 {
                opacity: 1;
                filter: alpha(opacity=100); /* For IE8 and earlier */
            }
        </style>
    </head>

نتیجه :

دسته بندی عکس ها، در CSS

نویسنده علیرضا گلمکانی

شماره کلید 26294

گزینه ها

به اشتراک گذاری (Share) در شبکه های اجتماعی

FaceBook Twitter Digg Reddit LinkedIn Pinterest StumbleUpon

نظرات 0 0 0

ارسال نظر جدید (بدون نیاز به عضو بودن در وب سایت)