8
تشکر

ایجاد بکگراند برای متن ها

ایجاد بکگراند برای متن ها

ایجاد بکگراند برای متن ها

در CSS3 خاصیت جدیدی به نام backgound-clip وجود دارد که مانند یک محیط نقاشی است. به زبان دیگر این خاصیت مکانی که قرار است بکگراند به آن اعمال شود را مشخص میکند. برای مثال میتوان مشخص کرد که بکگراند فقط تا ناحیه content-box یا تا ناحیه padding-box ادامه داشته باشد. همچنین مقدار border-box هم وجود دارد که تا مکان borderها بکگراند ادامه پیدا میکند.

اما خاصیت جدیدی هم وجود دارد. در ادامه با ما همراه باشید…

مرورگرهای بر پایه –webkit- یک قدم فراتر گذاشته و میتوان در آنها بکگراند را به متن اتصال داد. مانند آنچه که در عکس مطلب مشاهده میکنید. برای اینکار باید مقدار background-clip را برابر text قرار داد.

مانند کد زیر:

<h1>Aparnet.ir</h1>
h1{
    font-size: 100px;
    text-align: center;
      
    background: url(1.jpg) center center;
      
    -webkit-background-clip: text;
    background-clip: text;
      
    color: transparent;
}

 


نظرات این مطلب بسته است.