Овај пост ће укратко објаснити метод за додавање слике са УРЛ-а.
Како додати слику са УРЛ-а у ХТМЛ/ЦСС?
У ХТМЛ/ЦСС-у, две методе су доступне за додавање слике користећи УРЛ, који је наведен у наставку:
- Метод 1: Додајте слику користећи <имг> елемент у ХТМЛ-у
- Метод 2: Додајте слику користећи ЦСС својства у ХТМЛ-у
Метод 1: Додајте слику помоћу елемента <имг>
„ <имг> ” елемент је један воид елемент који нема подређени садржај и завршну ознаку. „ срц ' и ' све ” су два кључна атрибута која се користе унутар ознаке „<имг>”.
Погледајмо доле дата упутства за додавање слике помоћу елемента <имг>!
Корак 1: Направите див контејнер
Прво, креирајте див контејнер користећи „ <див> ” ознака. Затим убаците „ класа ” атрибут и доделити назив класи према жељи.
Корак 2: Уметните наслов
Затим користите потребну ознаку наслова из „ <х1> ' до ' <х6> ” ознака. На пример, користићемо ознаку <х2> и додати одређени текст као наслов унутар ознаке за отварање и затварање.
Корак 3: Додајте слику користећи УРЛ
Након тога, додајте „ <имг> ” и уметните доле наведене атрибуте унутар ознаке слике:
- “ срц ” атрибут се користи за додавање медијске датотеке. У ту сврху покрените жељени веб претраживач и копирајте УРЛ жељене слике.
- Затим наведите УРЛ као вредност „ срц ” атрибут.
- Следећи, ' све ” се користи за додавање имена за слику када се из неког разлога не приказује.
- “ висина ” својство одређује висину елемента према датој вредности.
- “ ширина ” који се користи за подешавање ширине елемента:
< х2 > Додајте слику са УРЛ-ом < / х2 >
< имг срц = '2Д49ДДАЦ7ЦФБ97ЦЕ9ЕБ3Ц52026БФ440457Д8Б627' све = 'Слика!' висина = '400 пиксела' ширина = '300 пиксела' / >
< / див >
Према доле датом излазу, наведена слика је успешно додата:
Метод 2: Додајте слику користећи ЦСС својства у ХТМЛ-у
Програмери такође могу да додају слику са УРЛ адресе користећи ЦСС “ позадинска слика ” ЦСС. у ту сврху следите доле наведене кораке.
Корак 1: Уметните наслов
Прво убаците текст заглавља уз помоћ ознаке за отварање и затварање <х2>.
Корак 2: Креирајте див контејнер
Затим направите див контејнер коришћењем ознаке <див> и додајте атрибут класе са његовим именом:
<х2 > Додајте слику са УРЛ-ом ><див цласс = 'имг-цонтаинер' > >
Корак 3: Приступите контејнеру
Сада приступите класи преко селектора тачака “ . ” и назив класе који је претходно креиран.
Корак 4: Додајте слику користећи ЦСС својство „бацкгроунд-имаге“.
Након тога, примените ЦСС својства испод да бисте додали слику са УРЛ-а унутар класе:
.имг-цонтаинер {висина : 400пк ;
ширина : 250пк ;
величина позадине : садржати ;
Позадинска слика : урл ( хттпс : //имагес .пекелс .цом/пхотос/ 2260800 /пекелс-пхото- 2260800 .јпег? ауто = цомпресс&цс = тинисргб&в = 1260 &х = 750 &дпр = једно )
}
У горе наведеном коду:
- “ висина ” својство се користи за подешавање висине елемента.
- “ ширина ” се користи за одређивање величине ширине елемента.
- “ величина позадине ” се користи за подешавање величине елемента позадине.
- “ позадинска слика ” својство додаје слику на полеђини елемента. За ову одговарајућу сврху, „ урл() ” функција се користи за додавање слике и лепљење УРЛ-а слике у функцију “ () ”.
Излаз
Научили сте о различитим методама за додавање слика са УРЛ адресе.
Закључак
Да би додали слику са УРЛ-а, програмери могу да користе „ <имг> ” ознака. Затим убаците „ срц ” и доделите УРЛ као вредност „срц”. Штавише, корисник може додати слику са УРЛ-а користећи ЦСС “ позадинска слика ' имовина. Овај текст наводи методе за додавање слике са УРЛ-а у ХТМЛ/ЦСС.