CSSで背景画像を小さくする方法-フロントエンドQ&A-php.cn

CSSで背景画像を小さくする方法

青灯夜游

リリース： 2023-01-11 09:19:25

オリジナル

6564 人が閲覧しました

CSS では、background-size 属性を使用して、背景画像を小さくすることができます。この属性は、背景画像のサイズを制御できます。追加する必要があるのは、「background-size: width value height value」だけです。 ;" スタイルを背景要素に追加するだけです。

CSSで背景画像を小さくする方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS では、background-size 属性を使用して背景画像を小さくできます。

background-size 属性は、背景画像のサイズを指定するために使用されます。構文形式は次のとおりです。

background-size: length|percentage|cover|contain;

ログイン後にコピー

Value	Description
length	背景画像の高さと幅を設定します。最初の値は幅を設定し、2 番目の値は高さを設定します。値が 1 つだけ指定された場合、2 番目の値は auto(automatic)
percentage	に設定され、バックグラウンドの割合。最初の値は幅を設定し、2 番目の値は高さを設定します。値が 1 つだけ指定された場合、2 番目の値は「auto」に設定されます。
cover	画像のアスペクト比は維持され、画像は拡大縮小されます。背景配置領域を完全にカバーする最小サイズ。
contain	画像のアスペクト比は維持され、画像は背景配置領域に収まる最大サイズに拡大縮小されます。

例:

背景画像を div 要素に追加します

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		div{
			width: 100%;
			height: 1000px;
			background: url(img/1.jpg) no-repeat;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

ログイン後にコピー

レンダリング:

CSSで背景画像を小さくする方法

以下のbackground-size属性を使用して、背景画像のサイズを制御します

div{
	width: 100%;
	height: 1000px;
	background: url(img/1.jpg) no-repeat;
	background-size:200px 250px;
}

ログイン後にコピー

レンダリング:

CSSで背景画像を小さくする方法

推奨チュートリアル : 「CSS ビデオチュートリアル」

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

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

CSSで背景画像を小さくする方法