Doğuhan ELMA tarafından Background yayınlanma tarihi
75 görünüm
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; |
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)); |
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 Yorum
Önerilen Yorumlar
Görüntülenecek yorum yok.