欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css中背景属性核心

程序员文章站 2022-04-01 07:59:02
...

background-color

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        div
        {
        	width: 500px;
        	height: 500px;
       	}
       	.box1
       	{
       		background-color: red;
       	}
       	.box2
       	{
       		background-color: rgb(0,255,0);
       	}
       	.box3
       	{
       		background-color: rgba(0,0,255,1);
       	}
       	.box4
       	{
       		background-color: #0ff;
       	}
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>

核心:rgba代表红绿蓝透明,混合在一起的颜色

background-image

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		div
		{
			width: 500px;
			height: 500px;
		}
		.box1
		{
			background-image: url(./1.jpg);
		}
	</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>

核心:默认背景图片是重复平铺的。直到宽高都500px。

background-repeat

<!DOCTYPE html>
<html>
<head>
	<title>
		
	</title>
	<style type="text/css">
		 div{
            width: 500px;
            height: 500px;
        }
        .box1
        {background-image: url(./1.jpg);
        background-repeat: repeat-y;
        }
        
	</style>
</head>
<body>
<div class="box1"></div>

</body>
</html>

核心:往xy轴平铺到规定的盒子的范围内.

background-position

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
div{
	width: 500px;
height: 500px;
	
}
.box1
{
	background-image: url(./1.jpg); 
	background-repeat: no-repeat;
	background-position: top  right;

}
	</style>
</head>
<body>
<div class="box1">

</div>
</body>
</html>

核心:水平垂直background-position: top right;,

连写:background-attachment

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		
		body
		{
			background-image: url(./1.jpg);
			background-repeat: no-repeat;
			background-attachment: fixed;
		}
	</style>
</head>
<body>
<div></div>
我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字
<br>
我是文字
<br>
我是文字
</body>
</html>

核心:不想滚动条随网页的滚动而滚动就设置background-attachment: fixed;,默认值scroll;