CSS3 - Background
35912 ワード
1. Background-image
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("http://poiemaweb.com/img/bg/dot.png");
}
</style>
</head>
<body>
<h3>Background image</h3>
</body>
</html>
2. background-repeat
背景画像の繰り返しを指定
垂直、水平または水平の繰り返しを指定できます.
background-repeat:repeat(デフォルト);
-設定された画像が画面より小さい場合、画像は自動的に繰り返し出力されます.
background-repeat: repeat-x;
-x軸のみで背景画像を繰り返します.
background-repeat: repeat-y;
-y軸のみで背景画像を繰り返す
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("http://poiemaweb.com/img/bg/dot.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h3>Background-repeat: repeat-x;</h3>
</body>
</html>
background-repeat: no-repeat;
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("http://poiemaweb.com/img/bg/dot.png");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h3>Background-repeat: no-repeat;</h3>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("http://poiemaweb.com/img/bg/dot.png"), url("http://poiemaweb.com/img/bg/paper.gif");
background-repeat: no-repeat, repeat;
}
</style>
</head>
<body>
<h3>Background-repeat: no-repeat, repeat;</h3>
</body>
</html>
3. background-size
背景画像のサイズを指定
背景画像の一意のスケールが保持されているため、設定によっては画像の一部が表示されない場合があります.
属性値はpx、%、cover、containsなどを使用します
背景画像の幅と高さを設定できます
-背景画像のサイズを指定したpx値で設定
-1番目の値はwidth、2番目の値はheight、
.bg {
background-size: 700px 500px;
}
-背景画像のサイズを指定した%値で設定
-1番目の値はwidth、2番目の値はheight、
.bg {
background-size: 100% 100%;
}
指定-背景画像のスケールを保持する場合は、親要素の幅、高さの大きい値に背景画像を調整します.
-画像の一部が表示されない場合があります.
.bg {
background-size: cover;
}
指定は-
.bg {
background-size: contain;
}
4. background-attachment
<!DOCTYPE html>
<html>
<head>
<style>
*, *:after, *:before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
.bg-wrap {
/* bg-wrap이 page-wrap보다 작은 경우, page-wrap이 가리는 문제 해결*/
min-height: 600px;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: auto;
/*or margin: 0.1px; */
}
.parallax {
background-image: url("http://poiemaweb.com/img/bg/stock-photo-125979219.jpg");
/* parallax scrolling effect */
background-attachment: fixed;
}
.normal {
background-image: url("http://poiemaweb.com/img/bg/stock-photo-155153867.jpg");
}
#page-wrap {
width: 400px;
/* 마진 상쇄 발생 */
margin: 50px auto;
padding: 30px;
background: white;
box-shadow: 0 0 20px black;
/* size/line-height | family */
font: 15px/2 Georgia, Serif;
}
</style>
</head>
<body>
<div class="bg-wrap parallax">
<div id="page-wrap">
<p>background-attachment : Specifies whether the background images are fixed or scrolls with the rest of the page</p>
<p>background-attachment : Specifies whether the background images are fixed or scrolls with the rest of the page</p>
<p>background-attachment : Specifies whether the background images are fixed or scrolls with the rest of the page</p>
</div>
</div>
<div class="bg-wrap normal"></div>
</body>
</html>
5. background-position
通常、backgroon-imageは左上から画像を出力し、backgroon-positionを使用して画像の座標(xps、ypos)を指定できます.
background-position:0%(デフォルト);
背景画像を右上に表示
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0px;
}
div {
background-image: url("http://poiemaweb.com/img/bg/dot.png");
background-color: #FFEE99;
background-repeat: no-repeat;
width: 32vw;
height: 200px;
margin-bottom: 2vw;
float: left;
}
div:not(:nth-of-type(3n+1)) {
margin-left: 2vw;
}
.example1 {
background-position: top;
}
.example2 {
background-position: bottom;
}
.example3 {
background-position: center;
}
.example4 {
background-position: left;
}
.example5 {
background-position: right;
}
.example6 {
/* percentage values */
background-position: 25% 75%;
}
.example7 {
/* length values
xpos ypos */
background-position: 10px 20px;
}
.example8 {
background-image: url("http://poiemaweb.com/img/bg/dot.png"), url("http://poiemaweb.com/img/bg/dot.png");
background-position: 0px 0px, center;
}
</style>
</head>
<body>
<div>default(0% 0%)</div>
<div class="example1">top</div>
<div class="example2">bottom</div>
<div class="example3">center</div>
<div class="example4">left</div>
<div class="example5">right</div>
<div class="example6">25% 75%</div>
<div class="example7">10px 20px</div>
<div class="example8">0px 0px, center</div>
</body>
</html>
6. background-color
.bg-col-white {
background-color: rgb(255, 255, 255);
}
bg-col-red {
background-color: red;
}
7. background Shorthand
background: color || image || repeat || attachment || position
<!DOCTYPE html>
<html>
<head>
<style>
div {
/* background: color || image || repeat || attachment || position */
background: #FFEE99 url("http://poiemaweb.com/img/bg/dot.png") no-repeat center;
width: 50vw;
height: 300px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Reference
この問題について(CSS3 - Background), 我々は、より多くの情報をここで見つけました https://velog.io/@sora2821/CSS3-Backgroundテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol