Bu gönderi, bir URL'den resim ekleme yöntemini kısaca açıklayacaktır.
HTML/CSS'de Bir URL'den Resim Nasıl Eklenir?
HTML/CSS'de, aşağıda listelenen URL'yi kullanarak bir resim eklemek için iki yöntem mevcuttur:
- Yöntem 1: HTML'de
Öğesi Kullanarak Görüntü Ekleme
- Yöntem 2: HTML'de CSS Özelliklerini Kullanarak Görüntü Ekleme
Yöntem 1: ![]()
Öğesini Kullanarak Görüntü Ekleme
“ ” öğesi, alt içeriği ve bitiş etiketi olmayan tek bir geçersiz öğedir. “ kaynak ' ve ' her şey ”, “
” etiketi içinde kullanılan iki temel özelliktir.
öğesini kullanarak bir resim eklemek için aşağıda verilen talimatlara bakalım!
Adım 1: Bir div Konteyneri Yapın
İlk olarak, “ kullanarak bir div kabı oluşturun. Ardından, ''dan gerekli başlık etiketini kullanın. ' ile ' ' etiket. Örneğin, Bundan sonra, bir 'ekleyin Aşağıdaki çıktıya göre belirtilen görsel başarıyla eklenmiştir: Geliştiriciler ayrıca CSS'yi kullanarak bir URL'den görsel ekleyebilirler. arka plan görüntüsü ” CSS. bunun için aşağıda verilen adımları takip ediniz. İlk önce Ardından, Şimdi, sınıfa nokta seçici aracılığıyla erişin ' . ” ve daha önce oluşturulan sınıf adı. Bundan sonra, görüntüyü sınıf içindeki bir URL'den eklemek için aşağıda listelenen CSS özelliklerini uygulayın: Yukarıda verilen kodda: Çıktı Bir URL'den resim eklemenin farklı yöntemlerini öğrendiniz. Bir URL'den resim eklemek için geliştiriciler '
2. Adım: Başlık Girin
etiketini kullanacağız ve ilgili metni açılış ve kapanış etiketlerinin içine bir başlık olarak ekleyeceğiz.
3. Adım: URL Kullanarak Bir Resim Ekleyin ” etiketini seçin ve aşağıda listelenen özellikleri resim etiketinin içine ekleyin:
< div sınıf = 'img-kapsayıcı' >
< h2 > URL ile Resim Ekle < / h2 >
< img kaynak = 'https://images.pexels.com/photos/2260800/pexels-photo-2260800.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' her şey = 'Resim!' yükseklik = '400 piksel' Genişlik = '300 piksel' / >
< / div >
Yöntem 2: HTML'de CSS Özelliklerini Kullanarak Görüntü Ekleme
1. Adım: Başlık Girin
açılış ve kapanış etiketi yardımıyla bir başlık metni girin.
2. Adım: div Kapsayıcısı oluşturun
3. Adım: Kapsayıcıya Erişim
4. Adım: 'background-image' CSS Özelliğini Kullanarak Görüntü Ekleyin
yükseklik : 400 piksel ;
Genişlik : 250 piksel ;
arka plan boyutu : içermek ;
Arka plan görüntüsü : url ( https : //Görüntüler .pexels .com/fotoğraflar/ 2260800 /pexels-fotoğraf- 2260800 .jpeg? Oto = kompres&cs = miniksrgb&w = 1260 &h = 750 &dpr = bir )
}
Çözüm
' etiket. Ardından, “ kaynak ” özelliğini kullanın ve URL'yi “src” değeri olarak atayın. Ayrıca, kullanıcı CSS'yi kullanarak URL'den bir resim ekleyebilir ' arka plan görüntüsü ' Emlak. Bu yazı, HTML/CSS'deki URL'den görüntünün eklenmesine ilişkin yöntemleri belirtmiştir.