image.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="/background.css">
</head>
<body>
<div class="flex">
<div>
<p>background-color: red;</p>
<div class="background-color box"></div>
</div>
<div>
<p>background-color: #03a9f4;</p>
<div class="background-color2 box"></div>
</div>
<div>
<p>background-color: rgba(12, 7, 77, 0.6);</p>
<div class="background-color3 box"></div>
</div>
<div>
<p>background-color: hsla(180, 50%, 50%, 1);</p>
<div class="background-color4 box"></div>
</div>
</div>
<div class="flex">
<div>
<p>background-image: url(/image.bmp);</p>
<div class="background-image box"></div>
</div>
<div>
<p>background-image: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);</p>
<div class="background-image2 box"></div>
</div>
</div>
<div class="flex">
<div>
<p>background-size: 120px 120px;</p>
<div class="background-image background-size box"></div>
</div>
<div>
<p>background-size: 380px 380px;</p>
<div class="background-image background-size2 box"></div>
</div>
<div>
<p>background-size: 100% 100%;</p>
<div class="background-image background-size3 box"></div>
</div>
</div>
<div class="flex">
<div>
<p>background-repeat: no-repeat;</p>
<div class="
background-image
background-size
background-repeat
box"></div>
</div>
<div>
<p>background-repeat: repeat-x;</p>
<div class="
background-image
background-size
background-repeat2
box"></div>
</div>
<div>
<p>background-repeat: repeat-y;</p>
<div class="
background-image
background-size
background-repeat3
box"></div>
</div>
</div>
<div class="flex">
<div>
<p>background-origin: border-box;</p>
<div class="
background-image
background-size
background-origin
box">一些文字</div>
</div>
<div>
<p>background-origin: padding-box;</p>
<div class="
background-image
background-size
background-origin2
box">一些文字</div>
</div>
<div>
<p>background-origin: content-box;</p>
<div class="
background-image
background-size
background-origin3
box">一些文字</div>
</div>
</div>
<div class="flex">
<div>
<p>background-clip: content-box;</p>
<div class="
background-image
background-size
background-clip
box">一些文字</div>
</div>
<div>
<p>background-clip: content-box;</p>
<div class="
background-image
background-size
background-clip2
box">一些文字</div>
</div>
<div>
<p>background-clip: content-box;</p>
<div class="
background-image
background-size
background-clip3
box">一些文字</div>
</div>
</div>
<div class="flex">
<div>
<p>background-position: 0 0;</p>
<div class="
background-image
background-repeat
background-position
box"></div>
</div>
<div>
<p>background-position: -30px -30px;</p>
<div class="
background-image
background-repeat
background-position2
box"></div>
</div>
<div>
<p>background-position: 10% 10%;</p>
<div class="
background-image
background-repeat
background-position2
box"></div>
</div>
</div>
<div class="flex">
<div>
<p>background-attachment: fixed;</p>
<div class="
background-image
background-attachment
box"></div>
</div>
<div>
<p>background-attachment: fixed;</p>
<div class="
background-image
background-attachment
box"></div>
</div>
</div>
<div class="flex">
<div>
<p>background-attachment: fixed;</p>
<div class="
background-image
background-attachment
box"></div>
</div>
<div>
<p>background-attachment: scroll;</p>
<div class="
background-image
background-attachment2
box"></div>
</div>
</div>
<div class="flex">
<div>
<p>background:rgba(100, 100, 100, .5) url(/image.bmp) no-repeat 60px 50px scroll;</p>
<p>background: background-color, background-image, background-repeat, background-position, background-attachment </p>
<div class="box background"></div>
</div>
</div>
<script>
window.onload = function () {
console.log('页面初始化', document.documentElement.clientHeight)
window.scrollTo(0, document.documentElement.clientHeight);
}
</script>
</body>
</html>
.flex {
display: flex;
margin-bottom: 30px;
}
.flex > * {
margin-right: 30px;
}
p {
margin: 5px 0;
}
.box {
width: 200px;
height: 200px;
color: whitesmoke;
font-size: 20px;
box-sizing: border-box;
border: 10px dashed rgba(100, 100, 100, .5);
}
.background-color {
background-color: red;
}
.background-color2 {
background-color: #03a9f4;
}
.background-color3 {
background-color: rgba(12, 7, 77, 0.6);
}
.background-color4 {
background-color: hsla(180, 100%, 50%, 1);
}
.background-image {
background-image: url(/image.bmp);
}
.background-image2 {
background-image: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
}
.background-size {
background-size: 120px 120px;
}
.background-size2 {
background-size: 380px 380px;
}
.background-size3 {
background-size: 100% 100%;
}
.background-repeat {
background-repeat: no-repeat;
}
.background-repeat2 {
background-repeat: repeat-x;
}
.background-repeat3 {
background-repeat: repeat-y;
}
.background-origin {
padding: 25px;
background-origin: border-box;
}
.background-origin2 {
padding: 25px;
background-origin: padding-box;
}
.background-origin3 {
padding: 25px;
background-origin: content-box;
}
.background-clip {
padding: 25px;
background-clip: border-box;
}
.background-clip2 {
padding: 25px;
background-clip: padding-box;
}
.background-clip3 {
padding: 25px;
background-clip: content-box;
}
.background-position {
padding: 25px;
background-position: 0 0;
}
.background-position2 {
padding: 25px;
background-position: -30px -30px;
}
.background-position3 {
padding: 25px;
background-position: 10% 10%;
}
.background-attachment {
background-attachment: fixed;
}
.background-attachment2 {
background-attachment: scroll;
}
.background {
background:rgba(100, 100, 100, .5) url(/image.bmp) no-repeat 60px 50px scroll;
}
