آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش کدر بودن و شفافیت تصویر در CSS

دوره های مرتبط با این مقاله

ایجاد تصاویر شفاف در CSS

ایجاد تصاویر شفاف (transparent) در CSS امری بسیار آسان است.
خاصیت opacity در CSS یکی از ویژه گی ها و امکانات جدید ویرایش CSS3 می باشد.
خاصیتی که برای شفاف سازی تصاویر در CSS3 تعبیه شده، opacity می باشد.
ابتدا نحوه ی ایجاد تصویر شفاف در CSS را به شما خواهیم آموخت.
تصویر در حالت عادی آن:

شفافیت تصویر در CSS

تصویر فوق که شفاف سازی به آن اعمال شده:

شفافیت تصویر در CSS

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

نمونه یک

        img {
            opacity: 0.4;
            filter: alpha(opacity=40); /* For IE8 and earlier */
        }
امتحان کنید

IE9، Firefox، Chrome، Opera و Safari نیز از خاصیت Opacity به منظور شفاف سازی تصویر بهره می گیرند. خاصیت opacity می تواند مقداری از 0.0 تا - 1.0 بگیرد. مقدار بیشتر باعث می شود، المان شفاف تر گردد.
IE8 و ویرایش های قدیمی تر آن همگی از filter:alpha(opacity=x) بهره می گیرند. x می تواند مقداری از 0 تا 100 بگیرد. هرچه مقدار بیشتر باشد عنصر مربوطه شفاف تر می گردد.

شفافیت تصویر - Hover Effect

در این بخش منظور از Hover Effect این است که در صورت قرار دادن اشاره گر موس روی تصویر، تصویر شفاف تر شود.
کد CSS آن به ترتیب زیر نوشته می شود:

نمونه دو

        img {
            opacity: 0.4;
            filter: alpha(opacity=40); /* For IE8 and earlier */
        }
            img:hover {
                opacity: 1.0;
                filter: alpha(opacity=100); /* For IE8 and earlier */
            }
امتحان کنید

قطعه کد (block) اول در این مثال درست مشابه کدی است که در مثال 1 بکار برده شد. علاوه بر آن در این مثال، کد را چنان تعریف کرده ایم که اگر کاربر مکان نمای موس را روی تصویر مربوطه قرار دهد، تصویر مزبور از حالت transparent یا شفاف بیرون آید.
کد CSS برای این امر opacity=1 می باشد.
در IE8 و نسخه های قدیمی تر: filter:alpha(opacity=100)
هنگامی که اشاره گر موس از روی تصویر برداشته می شود، تصویر مجدداً به حالت شفاف باز می گردد.

جای گذاری نوشته در کادر شفاف داخل تصویر

کد منبع (Source code) این مثال به صورت زیر می باشد:

نمونه سه

        div.background {
            background: url(klematis2_big.jpg) repeat;
            border: 2px solid black;
        }
        div.transbox {
            margin: 30px;
            background-color: #ffffff;
            border: 1px solid black;
            opacity: 0.6;
            filter: alpha(opacity=60); /* For IE8 and earlier */
        }
            div.transbox p {
                margin: 5%;
                font-weight: bold;
                color: #000000;
            }
امتحان کنید

در مرحله ی اول، یک المان div ایجاد می کنیم (class="background" ) و به دنبال آن یک تصویر پس زمینه و خط حاشیه (border). سپس، یک div دیگر (class="transbox") داخل div اول ایجاد می کنیم. div class="transbox" دارای یک رنگ پس زمینه و خط حاشیه (border) است . div ، شفاف یا transparent خواهد بود. درون div شفاف،یک نوشته (text) داخل تگ p اضافه می کنیم.

  • 3186
  •    2138
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .