Web前端开发之CSS学习笔记3—颜色和背景

云卷云舒_jing

已于 2022-04-30 17:03:29 修改

阅读量3.1k

点赞数 3

分类专栏： web前端文章标签： css 前端学习 css3

于 2022-04-30 15:48:08 首次发布

本文链接：https://blog.csdn.net/qq_45709187/article/details/124508802

版权

web前端专栏收录该内容

14 篇文章 9 订阅

订阅专栏

1.CSS的颜色表达

1.1前景色color

1.2背景色background-color

2.背景

2.1 background-image:url()设置背景图;

2.2 background-repeat 属性设置是否及如何重复背景图像

2.2.1 background-repeat: no-repeat设置背景图不重复

2.2.2 background-repeat: space / repeat-x的区别

2.3 background-position属性设置背景图像的起始位置

2.3.1 background-position:center图片居中

2.3.2 background-position: 20px 80px;控制图片距离字的水平距离和垂直距离

2.4 background-size 属性规定背景图像的尺寸

2.5 background-attachment设置背景图像是否固定或者随着页面的其余部分滚动

2.6 background-origin属性：相对于内容框来定位背景图像

2.7 background-clip属性指定背景绘制区域

1.CSS的颜色表达

RGB：0~255（调色板）

RGBA：a表示透明度，如：color: rgba(77, 170, 136, 0.5);

1.1前景色color

例：hover{}作用：鼠标放上面会变色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前景色</title>
		<style type="text/css">
			h1{
				color: tomato;
			}
			h1:hover{        /*鼠标放在h1上会变色*/
				color: rgba(77, 170, 136, 0.5);  /*RGBA：a表示透明度*/
			}
			p{
				color:rgb(113, 155, 170); 
			}
		</style>
	</head>
	<body>
		<h1>《蜀道难》</h1>
		<p>噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。</p>
	</body>
</html>

1.2背景色background-color

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景色</title>
	</head>
	<body>
		<!--单独设置每一段文本的背景色-->
		<p style="background-color: #9dbfd5;">你好</p>
		<p style="background-color: #bcd2a3;">兄弟</p>
		<p style="background-color: #b0b6d7;">你好</p>
		<p style="background-color: #ddc4d9;">集美</p>
	</body>
</html>

2.背景

2.1 background-image:url()设置背景图;

注：padding: 150px 100px 50px 200px;

上边距150px，右边距100px，下边距50px，左边距200px。

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前景色</title>
		<style type="text/css">
			/*为body元素指定背景图*/
			body{
				background-image:url(tu3.jpg);
				padding: 150px 100px 50px 200px; /*上边距150px，右边距100px，下边距50px，左边距200px。*/
			}
		</style>
	</head>
	<body>
		<h1>《蜀道难》</h1>
		<p>噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。</p>
	</body>
</html>

注：背景图和背景色同时设置，显示背景图。背景图覆盖背景色。

<style type="text/css">
        body{
                background-color: pink;
                background-image:url(tu3.jpg);

                padding: 150px 100px 50px 200px;
        }
</style>

2.2 background-repeat 属性设置是否及如何重复背景图像

语法：background-repeat:repeat / space / repeat-x / repeat-y / no-repeat / inherit;

值	说明
repeat	默认，背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
space	水平或者垂直重复图像，当背景图片不能以整数次平铺时，会用空白间隙均匀填充在图片周围，图片不缩放。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

2.2.1 background-repeat: no-repeat设置背景图不重复

例子：background-repeat: no-repeat

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前景色</title>
		<style type="text/css">
			body{
				background-image:url(tu4.jpg);
				background-repeat: no-repeat; /*设置背景图不重复*/
				padding: 150px 100px 50px 200px;
			}
		</style>
	</head>
	<body>
		<h1>《蜀道难》</h1>
		<p>噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。</p>
	</body>
</html>

结果：图1是没设置background-repeat: no-repeat，图2设置background-repeat: no-repeat。

图1：

图2：

2.2.2 background-repeat: space / repeat-x的区别

repeat-x：图像将在水平方向重复。

space：水平或者垂直重复图像，当背景图片不能以整数次平铺时，会用空白间隙均匀填充在图片周围，图片不缩放。

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>重复背景图片</title>
		<style type="text/css">
			/*将页面背景覆盖满小猪*/
			body{
				background-image: url('tu西瓜.jpg');
				background-repeat: space; 
                /*background-repeat:repeat-x;*/
			}
		</style>
	</head>
	<body>
		<p>西瓜超好吃~</p>
		<p>西瓜超好吃~</p>
	</body>
</html>

图1是background-repeat:repeat-x; 图2是background-repeat: space;

图1：

图2：

2.3 background-position属性设置背景图像的起始位置

值	说明
top、left、right、bottom、center两两组合	组合如：topleft、centercenter、rightbottom等。如果仅规定了一个关键词，那么第二个值将是"center"。默认值：0%0%。
x% y%	第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。。默认值为：0％0％
xpos ypos	第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果仅规定了一个值，另一个值将是50%。也可以混合使用 % 和 position 值。

2.3.1 background-position:center图片居中

例子：background-position:center;

<html>
	<head>
		<style type="text/css">
			body
			{ 
				background-image:url('tu4.jpg');
				background-repeat:no-repeat;
				background-attachment:fixed;/*把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。*/
				background-position:center; /*背景位置*/
		</style>
	</head>
	<body>
		<p style="font-size:30px">30px字体效果</p>
		<font size="10"> 10号字体效果</font>
	</body>
</html>

2.3.2 background-position: 20px 80px;控制图片距离字的水平距离和垂直距离

如图所示背景图会遮挡文字，可以设置图片的位置，使其不会遮挡文字。

例子：background-position: 20px 80px;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>重复背景图片</title>
		<style type="text/css">
			/*将页面背景覆盖满小猪*/
			body{
				background-image: url('tu西瓜.jpg');
				background-repeat: space;
				background-position: 20px 80px;
			}
		</style>
	</head>
	<body>
		<p>西瓜超好吃~</p>
		<p>西瓜超好吃~</p>
	</body>
</html>

background-position: 20px 80px；

background-position: 100px 80px;

background-position:20px 150px;

2.4 background-size 属性规定背景图像的尺寸

语法：background-size: length|percentage|cover|contain;

值	说明
auto	默认原始尺寸
length(x y)	设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为“auto”。
percentage(x% y%)	设置图像的宽度和高度分别占父元素的百分百。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为“auto”。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

例子：background-size: 15%;调整背景图片大小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>调整图片尺寸</title>
		<style type="text/css">
			body{
				background-image: url(tu3.jpg);
				background-repeat: no-repeat;
				background-position: 10px 50px;
				background-size: 15%;
			}
		</style>
	</head>
	<body>
		<p style="font-size:50px">好好学习！</p>
	</body>
</html>

调整前：

调整后：

2.5 background-attachment设置背景图像是否固定或者随着页面的其余部分滚动

语法：background-attachment:scroll || fixed || inherit || local;

值	说明
scroll	背景图片随页面滚动而滚动。这是默认
local	背景图片随元素滚动而滚动
fixed	背景图像是固定的，background-size对它无效
inherit	指定background-attachment的设置应该从父元素继承

例子：background-attachment: local;背景图随元素框变大而变大

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置图片的附着方式</title>
		<style type="text/css">
			textarea{
				background-image: url(tu3.jpg);
				background-repeat: no-repeat;
				background-size: 50%;
				background-attachment: local;
			}
		</style>
	</head>
	<body>
		<textarea>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus culpa quos nisi voluptate magnam porro magni numquam eius vitae in placeat laudantium saepe distinctio tenetur cum doloremque molestias ad esse! </textarea>
	</body>
</html>

2.6 background-origin属性：相对于内容框来定位背景图像

background-origin 属性规定 background-position 属性相对于什么位置来定位

语法：background-origin: padding-box|border-box|content-box;

值	说明
padding-box	背景图像相对于内边距框来定位。
border-box	背景图像相对于边框盒来定位。
content-box	背景图像相对于内容框来定位

例子：对比三个属性的结果区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置图片起始位置和显示区域</title>
		<style type="text/css">
			div{
				border: 25px dotted #c2f4bd;
				padding: 100px;
				background-image: url(tu西瓜.jpg);
				background-repeat: no-repeat;
				background-size: 50px 50px;
				background-origin: border-box;
			}
		</style>
	</head>
	<body>
		<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quod voluptatum nisi voluptates reprehenderit ad beatae perspiciatis nesciunt nihil laborum obcaecati aliquid dignissimos illo ut eius esse repellendus aliquam iste!</div>
	</body>
</html>

①background-origin: padding-box;西瓜图片从内边距左上角开始

②background-origin:content-box; 西瓜图片从内容区域左上角开始。

③background-origin: border-box; 西瓜从边框左上角开始

2.7 background-clip属性指定背景绘制区域

语法：background-clip: border-box|padding-box|content-box;

值	说明
border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。

例子：三者差别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鱼C-零基础入门学习Web（Html5+Css3）</title>
    <style>
        #example1 {
            border: 10px solid black;
            padding:33px; /*内边距*/
            background: lavender;
        }

        #example2 {
            border: 10px solid black;
            padding:33px;
            background: pink;
            background-clip: padding-box;
        }

        #example3 {
            border: 10px solid black;
            padding:33px;
            background: lightblue;
            background-clip: content-box;
        }
    </style>
</head>
<body>
    <p>未设置 background-clip :</p>
    <div id="example1">
        <h2>好好学习</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>

    <p>background-clip: padding-box:</p>
    <div id="example2">
        <h2>好好学习</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>

    <p>background-clip: content-box:</p>
    <div id="example3">
        <h2>好好学习</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
</body>
</html>

注：如何整合背景设置

body {
    background-color:gray;
    background-image: url('tu.jpg'); 
    background-repeat:no-repeat;
    padding: 80px 0px 50px 360px;
}

以上可变成：

body {
    background:gray url('tu.jpg') no-repeat;
    padding: 80px 0px 50px 360px;
}

云卷云舒_jing

关注

3
点赞
踩
31

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录