css中背景属性核心

最新推荐文章于 2024-08-25 07:11:13 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2024-08-25 07:11:13 发布

阅读量464

点赞数 1

本文链接：https://blog.csdn.net/qq_37805832/article/details/108328363

版权

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>