پاسخ داده شد
0
0

چطور روی image ، فیلتر بندازیم؟

  • شما باید برای ارسال دیدگاه شوید
پاسخ عالی
0
0

فرض کنید که کد html زیر را نوشته ایم و میخواهیم هر بار، روی عکس زیر یک نوع فیلتر بیندازیم:

فیلتر عکس در css - موستانگ

<div>
  <h1>Original Image:</h1>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg">
</div>

<div class="filt1">
  <h1>Filtered Image:</h1>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg">
</div>
<br>
<div class="filt2">
  <h1>Filtered Image:</h1>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg">
</div>
<br>
<div class="filt3">
  <h1>Filtered Image:</h1>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg">
</div>

کد css به شکل زیر می شود:

img {
  display: block;
  max-width: 100%;

}
.filt1{
   filter: grayscale(90%) sepia(13%) saturate(700%); 
}
.filt2{
  filter: hue-rotate(-40deg); 
}
.filt3{
  filter: contrast(170%) saturate(80%) 
}

 

در اینجا سه نوع فیلتر داریم:

1- Saturated:

فیلتر عکس در css - موستانگ

 filter: grayscale(90%) sepia(13%) saturate(700%);

2- BnW :

فیلتر عکس در css - موستانگ

filter: hue-rotate(-40deg); 

3- Sharp:

فیلتر عکس در css - موستانگ

filter: hue-rotate(-40deg); 
  • شما باید برای ارسال دیدگاه شوید
نمایش 1 نتیجه
پاسخ شما
اگر قبلاً حساب کاربری دارید با پر کردن فیلد های زیر یا به عنوان مهمان ارسال کنید.
نام*
ایمیل*
وب سایت