Jump to content
Üyelik kaydınızı yaparak son yazılan içeriklerden haberdar olun! ×

CSS

  • entries
    53
  • comments
    0
  • views
    1,341

CSS'de background özelliği ve TailwindCSS Sınıf Karşılığı


Doğuhan ELMA

42 views

CSS'de background özelliği, bir öğenin arka planını ayarlamak için kullanılır. Bu özellik, renkler, resimler, gradientler (renk geçişleri) ve bu özelliklerin nasıl yerleştirileceği ve ölçekleneceği gibi birden çok alt özelliği tek bir deyimde birleştirmenize olanak tanır. background kısa bir yazım biçimidir ve şu alt özellikleri içerir:

background-color: Arka plan rengini belirler.

background-image: Bir veya daha fazla arka plan resmini belirtir.

background-position: Arka plan resminin konumunu ayarlar.

background-size: Arka plan resminin boyutunu ayarlar.

background-repeat: Arka plan resminin nasıl tekrarlanacağını belirler.

background-origin: Arka plan resminin konumlandırılacağı kutunun boyutlarını belirler.

background-clip: Arka planın boyutlandırılacağı kutunun hangi bölümünü kaplayacağını belirler.

background-attachment: Arka plan resminin sabit mi yoksa kaydırılabilir mi olacağını belirler.

 

Örnek Kullanımlar

Basit Arka Plan Rengi

div {
  background-color: #ff8800;
}
body {
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-position: right top;
  background-size: cover;
}

 

TailwindCSS:

 

Background Attachment

Class
Properties
bg-fixed background-attachment: fixed;
bg-local background-attachment: local;
bg-scroll background-attachment: scroll;

 

Background Clip:

Bir öğenin arka planının sınırlayıcı kutusunu kontrol etmek için yardımcı sınıflar.

Class
Properties
bg-clip-border background-clip: border-box;
bg-clip-padding background-clip: padding-box;
bg-clip-content background-clip: content-box;
bg-clip-text background-clip: text;

 

1.png

 

Background Color:

Class
Properties
Preview 
bg-inherit background-color: inherit;
 
bg-current background-color: currentColor;
 
bg-transparent background-color: transparent;
 
bg-black background-color: rgb(0 0 0);
 
bg-white background-color: rgb(255 255 255);
 
bg-slate-50 background-color: rgb(248 250 252);
 

 

devami var:

 

Background Origin

Bir öğenin arka planının kenarlıklara, dolguya ve içeriğe göre nasıl konumlandırılacağını kontrol etmek için yardımcı sınıflar.

 

Class
Properties
bg-origin-border background-origin: border-box;
bg-origin-padding background-origin: padding-box;
bg-origin-content background-origin: content-box;

 

Background Position:

Bir öğenin arka plan görüntüsünün konumunu kontrol etmek için yardımcı sınıflar.

Class
Properties
bg-bottom background-position: bottom;
bg-center background-position: center;
bg-left background-position: left;
bg-left-bottom background-position: left bottom;
bg-left-top background-position: left top;
bg-right background-position: right;
bg-right-bottom background-position: right bottom;
bg-right-top background-position: right top;
bg-top background-position: top;

 

Background Repeat:

Class
Properties
bg-repeat background-repeat: repeat;
bg-no-repeat background-repeat: no-repeat;
bg-repeat-x background-repeat: repeat-x;
bg-repeat-y background-repeat: repeat-y;
bg-repeat-round background-repeat: round;
bg-repeat-space background-repeat: space;

 

Background Size:

Bir öğenin arka plan görüntüsünün arka plan boyutunu kontrol etmek için yardımcı sınıflar..

Class
Properties
bg-auto background-size: auto;
bg-cover background-size: cover;
bg-contain background-size: contain;

 

Background Image:

Bir öğenin arka plan görüntüsünü kontrol etmek için yardımcı sınıflar..

bg-none background-image: none;
bg-gradient-to-t background-image: linear-gradient(to top, var(--tw-gradient-stops));
bg-gradient-to-tr background-image: linear-gradient(to top right, var(--tw-gradient-stops));
bg-gradient-to-r background-image: linear-gradient(to right, var(--tw-gradient-stops));
bg-gradient-to-br background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
bg-gradient-to-b background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
bg-gradient-to-bl background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
bg-gradient-to-l background-image: linear-gradient(to left, var(--tw-gradient-stops));
bg-gradient-to-tl background-image: linear-gradient(to top left, var(--tw-gradient-stops));

 

1.png

 

Gradient Color Stops:

<div class="bg-gradient-to-r from-cyan-500 to-blue-500 ..."></div>
<div class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 ..."></div>
<div class="bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% ..."></div>

 

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...