この投稿では、URL から画像を追加する方法について簡単に説明します。
HTML/CSS で URL から画像を追加する方法は?
HTML/CSS では、次の 2 つの方法で URL を使用して画像を追加できます。
方法 1: 要素を使用して画像を追加する
「 <画像> ” 要素は、子コンテンツと終了タグを持たない単一の void 要素です。 「 ソース ' と ' すべての 」は、「 」タグ内で使用される 2 つの重要な属性です。
要素を使用して画像を追加するための以下の手順を見てみましょう!
ステップ 1: div コンテナを作成する
まず、「 次に、「」から必要な見出しタグを使用します ' に ' ' 鬼ごっこ。たとえば、 その後、「 <画像> 」タグを付けて、イメージ タグ内に以下の属性を挿入します。 以下の出力によると、指定されたイメージが正常に追加されました。 開発者は、CSS を使用して URL から画像を追加することもできます。 背景画像 」CSS.この目的のために、以下の手順に従ってください。 まず、開始タグと終了タグ 次に、 次に、ドットセレクターを介してクラスにアクセスします “ . 」と以前に作成したクラス名。 その後、以下の CSS プロパティを適用して、クラス内の URL から画像を追加します。 上記のコードでは: 出力 URL から画像を追加するさまざまな方法について学習しました。 URL から画像を追加するには、開発者は「 <画像> ' 鬼ごっこ。次に、「 ソース 」属性を指定し、URL を「src」値として割り当てます。さらに、CSS「 背景画像 ' 財産。この記事では、HTML/CSS で URL から画像を追加する方法について説明しました。
ステップ 2: 見出しを挿入する
タグを使用して、特定のテキストを開始タグと終了タグ内の見出しとして追加します。
ステップ 3: URL を使用して画像を追加する
< 分周 クラス = 「imgコンテナ」 >
< h2 > URL付きの画像を追加 < / h2 >
< 画像 ソース = 'https://images.pexels.com/photos/2260800/pexels-photo-2260800.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' すべての = '画像!' 身長 = 「400px」 幅 = 「300px」 / >
< / 分周 >
方法 2: HTML で CSS プロパティを使用して画像を追加する
ステップ 1: 見出しを挿入する
を使用して見出しテキストを挿入します。
ステップ 2: div コンテナーを作成する
> URL付きの画像を追加
>
ステップ 3: コンテナーにアクセスする
ステップ 4: 「background-image」CSS プロパティを使用して画像を追加する
身長 : 400px ;
幅 : 250px ;
背景サイズ : 含む ;
背景画像 : URL ( https : //画像 .pexels .com/写真/ 2260800 /pexels-写真- 2260800 .jpeg? 自動 = 圧縮(&C) = tinysrgb&w = 1260 &H = 750 &dpr = 1 )
}
結論