コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS3で背景画像を設定する方法

CSS3で背景画像を設定する方法

王林
リリース： 2023-01-06 11:13:30
オリジナル
3497 人が閲覧しました

css3 で背景画像を設定する方法は、[background-image: url(css.jpg)] 属性を追加することです。背景画像属性は、要素の背景画像を設定し、URL に画像の URL アドレスを記入するために使用されます。

CSS3で背景画像を設定する方法

#この記事の動作環境: Windows10 システム、css 3、thinkpad t480 コンピューター。

背景画像を追加したい場合は、background-image 属性を選択すると、ローカル画像を背景として導入できます。

background-image プロパティは、要素の背景画像を設定します。

属性値:

    ##url('URL') 画像 URL

    • 具体的なコードは次のとおりです。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 200px;
				height: 200px;
				border: 1px solid black;
				background-image: url(css.jpg);/* 引入图片 */
				background-size: 100px 100px;/* 设置图片的大小 */
background-repeat: no-repeat;/* 如果图片比较小,框比他大的时候,设置的显示方式,repeat-x沿x轴显示,repeat-y沿y轴显示 */
background-position: 50% 50%;/* 设置图片的位置,left top左上,center center居中..... */
			}
		</style>
		<title></title>
	</head>
	<body>
		<div></div>
	</body>
</html>
ログイン後にコピー

関連ビデオ チュートリアル:

css ビデオ チュートリアル

以上がCSS3で背景画像を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
css3 背景画像
ソース：php.cn
前の記事：CSSでテキストボックスを非表示にする方法 次の記事：CSSで文字間隔を調整する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート