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

به نام خدا

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

opacity-background

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

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


در این روش شما به سادگی با استفاده از یک تگ [tag]img[/tag] با absolute position میتوانید آن را ایجاد کنید. باید توجه داشته باشید که تگ‌های HTML خود را داخل یک container قرار دهید که دارای [tag]position: relative;[/tag] باشد. کدهای 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 ایجاد میکنیم و به یکی از شبه عناصر [tag]:before[/tag] یا [tag]:after[/tag] اون یک تصویر پس‌زمینه با [tag]opacity[/tag] کمتر از 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;
}

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

 

[dl]دانلود[/dl]

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

موفق باشید.

 
ارسال دیدگاه
ما همه سوالات و دیدگاه ها رو می خونیم و پاسخ میدیم
۲ دیدگاه
amin ۰۷ بهمن ۱۳۹۸، ۱۸:۳۱
من دارم یه فرم ورود کاربر ورست میکنم میخوتم تکست هام شفاف باشه
سجاد زیدونی ۲۵ آبان ۱۳۹۳، ۲۳:۱۳
آموزش جالب و مفیدی بود خیلی ممنونم از سایت 7 لرن