Nasıl oluşturulur: Tam sayfa görüntüsü
- önceki sayfa şeffaf görsel metni
- sonraki sayfa görsel form
CSS ile tam sayfa arka plan görüntüsü nasıl oluşturulur öğrenin.
Tam sayfa görüntüsü
Tüm tarayıcı penceresini kaplayacak arka plan görüntüsü nasıl oluşturulur öğrenin. Aşağıdaki örnek, tam ekran (ve yarım ekran) duyarlı arka plan görüntülerini gösterir:
Tam yükseklik görüntüsü nasıl oluşturulur
Bir konteyner elementi kullanın ve bu konteynerin arka planına %100 yüksekliğinde bir görüntü ekleyin.
İpucu:50% kullanarak yarım sayfa arka plan görüntüsü oluşturabilirsiniz. Daha sonra görüntüyü mükemmel bir şekilde merkeze almak ve ölçeklendirmek için aşağıdaki arka plan özelliklerini kullanın:
Dikkat:Görüntünün ekranın tamamını kaplamasını sağlamak için height: 100% hemde uygulanır <html> ve <body>:
Tam sayfa arka plan görüntüsü:
body, html {
height: 100%;
}
.bg {
/* Kullanılan görüntü */
background-image: url("dancer.jpg");
/* Tam yükseklik */
height: 100%;
/* İyi bir şekilde merkeze alır ve görüntüyü ölçeklendirir */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
yarım sayfa arka plan görseli:
.bg {
height: 50%;
}
- önceki sayfa şeffaf görsel metni
- sonraki sayfa görsel form
