css中背景属性核心

贵哥的编程之路

发布于 2020-10-28 10:35:26

4360

发布于 2020-10-28 10:35:26

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;

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/08/31 ，如有侵权请联系 cloudcommunity@tencent.com 删除

attachment