تغییر شفافیت تصویر پس‌زمینه با CSS

‏  2 دقیقه
۲۵ آبان ۱۳۹۳
تغییر شفافیت تصویر پس‌زمینه با CSS

به نام خدا

با استفاده از CSS و CSS3 کار‌های زیادی میتوان انجام داد ولی تغییر شفافیت(opacity) یک CSS Background Image یکی از آنها نیست. اگر شما اهل خلاقیت باشید راه‌های خلاقانه ی زیادی هست که بتوانیم با استفاده از آنها کاری کنیم که به نظر برسد شفافیت تصویر بکگراند را تغییر دادیم.

opacity-background

ما در اینجا با استفاده از دو روش این کار را انجام میدهیم.

روش اول: استفاده از absolute position و یک تصویر

در این روش شما به سادگی با استفاده از یک تگ img با absolute position میتوانید آن را ایجاد کنید. باید توجه داشته باشید که تگ‌های HTML خود را داخل یک container قرار دهید که دارای position: relative; باشد. کدهای HTML به صورت زیر خواهد بود.

<div class="container">
    <h1>Method 1: Absoloute Position</h1>
    <img src="img.jpg">
</div>

CSS:

.container {
    position: relative;
    overflow: hidden;
}
.container h1 {
    padding: 200px;
    position: relative;
    z-index: 2;
} 
.container img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    opacity: 0.6;
}

روش دوم: استفاده از شبه عناصر 

در روش دوم از شبه عناصر کمک میگیریم که شخصاً ترجیح میدهم از روش دوم استفاده کنم. به این صورت که یک div ایجاد میکنیم و به یکی از شبه عناصر :before یا :after اون یک تصویر پس‌زمینه با opacity کمتر از 1 اختصاص میدهیم.

کدهای HTML به صورت زیر خواهد بود.

<div class="container">
    <h1>Method 2: Pseudo-Element</h1>
</div>

CSS:

.container {
    position: relative;
    background: #3498DB;
    overflow: hidden;
}
/* You could use :after - it doesn't really matter */
.container:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.6;
    background-image: url('img.jpg');
    background-repeat: no-repeat;
    background-position: 50% 0;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}

میتونید در پایین دموی هر دو روش رو مشاهده کنید.

 

امیدوارم از این پست استفاده برده باشید.

موفق باشید.

چه امتیازی به این مقاله می دید؟
نویسنده علی امینی
یک وب دیزاینر هستم که میشه گفت بر زبان های HTML, CSS, JavaScript مسلطم و همیشه با کتابخانه jQuery کار میکنم. از میان زبان های سمت سرور PHP رو میپسندم و CMS مورد علاقه من WordPress هست. هیچ IDE نمیتونه جای SublimeText رو برام بگیره و همیشه خودمو به روز نگه میدارم و به کدنویسی عشق می ورزم.
ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 

نظرات کاربران

amin

من دارم یه فرم ورود کاربر ورست میکنم میخوتم تکست هام شفاف باشه

سجاد زیدونی

آموزش جالب و مفیدی بود خیلی ممنونم از سایت 7 لرن