ホームページ  >  記事  >  ウェブフロントエンド  >  CSS3で背景画像を設定する方法

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

王林
王林オリジナル
2021-05-17 14:08:133439ブラウズ

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。