bg-text-clip1

ساخت متن جذاب با پس زمینه

تو این مقاله آموزشی میخام بهت یاد بدم چطوری بک گراند یه عکس رو بزاری برای متن مورد نظرت

ابتدا تو تگ html متن مورد نظرو مینویسی و به تگت یه class میدی  


<p class="text"> idejet.ir </p>

حالا تو css به class مورد نظرت ویژگی های زیر رو باید اضافه کنی



background-image: url(../images/images.png);


ابتدا برای تکست اتریبیوت زیر اضافه میکنی و آدرس عکس رو میدی

ویژگی بعدی که باید اضافه بشه 

 



background-clip: text;


 

حالا برای اینکه تصویرت دقیقا داخل متن قرار بگیره ویژگی زیر رو اضافه کن .

 



-webkit-background-clip: text;


 

و ویژگی آخر



color: transparent;


 

به همین سادگی :)

 

کد کامل css



.text
{
    background-image: url(../images/images.png);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

3 سال پیش
برای ثبت نظر لطفا وارد سایت شوید.