background

Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490

画像について

画像にはビットマップデータ形式のJPEG,PNG,GIFとベクターデータ形式のSVGがあります。
それぞれ以下の特徴があります。

ビットマップデータ形式:正方形の点が集合したもの。拡大したら見た目が粗くなる。
ベクターデータ形式:点の座標や結ぶ線などの数式データで書かれている。拡大しても見た目がきれい

	長所	短所
ビットマップデータ形式:JPEG	圧縮率を指定できる、PNGと比べてサイズが軽い
PNG	透過が可能、	JPEGと比べてサイズが重い
GIF	サイズが軽い、透過が可能	256色までしか設定できない
ベクターデータ形式:SVG	アニメーションを設定できる

background-color:       背景色(初期値：透明)
background-image:     背景画像(初期値：背景画像なし)
background-repeat:     背景画像の繰り返し(初期値：repeat)
background-position:   背景画像の位置(初期値：左寄せ)
background-size:         背景画像のサイズ (初期値：auto)

個別のプロパティで上書きしたいときは後に記述する必要があります。

背景に画像を表示

background-size:coverを適用して縦横比を維持したまま画面全体を覆うように背景を表示。

背景に動画を表示

より複雑な動画再生を実現

bigVideo.jsを利用することで複数の動画を連続再生させることができます。

スマートフォンやタブレットには対応していません。

画像や動画をトリミングする

丸く切りぬく

三角で切りぬく

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="style.css">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!--[if lt IE 9]>
			<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>
		<div class="bg">
			<img src="img/back.jpg" alt="背景" />
		</div>
		<div class="content">
			<p>〜内容を記述〜</p>
		</div>
		<div id="triangle-up"></div>
	</body>
</html>

html,body	{
	height:100%;
	width:100%;
	margin:0;
	padding::0;
	position: relative;
}

.bg:before {
	border-top: 0;
	border-right: 150px solid white;
	border-bottom: 300px solid transparent;
	border-left: 150px solid white;
	content: "";
	position:absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
}

.bg	{
	width:300px;
	height:300px;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin:auto;
	z-index: -1;
}

.bg img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width:100%;
}

.content	{
	position:absolute;
	top:0;
	left:0;
}

文字で切り抜く

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="style.css">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!--[if lt IE 9]>
			<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>
		<p>
			画像を文字で<br>
			トリミング。
		</p>
	</body>
</html>

p	{
	font-family: sans-serif;
	font-size:100pt;
	font-weight:bold;
	background: url('img/back.jpg') no-repeat 50% 50%;
	background-size: cover;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	-ms-background-clip: text;
	background-clip: text;
	color: transparent;
}