CSS学习笔记4CSS的背景以及属性

最新推荐文章于 2024-06-14 11:02:27 发布
最新推荐文章于 2024-06-14 11:02:27 发布
阅读量126 收藏
点赞数
分类专栏： CSS 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qwq_666/article/details/115867179
版权

CSS的背景

通过背景属性，可以给页面元素添加背景样式

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

背景颜色

background-color属性定义了元素的背景颜色

background-color:颜色值;

一般情况下元素背景颜色默认值是transparent（透明），我们也可以手动指定背景颜色为透明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景颜色</title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				/* background-color: transparent; 透明的 清澈的 */
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

背景图片

background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）

background-image:none | url (url)
参数值作用
none无背景图（默认的）
url使用绝对或相对指定背景图像

背景平铺

如果需要在HTML页面上对背景图片进行平铺，可以使用background-repeat属性

background-repeat:repeat | no-repeat | repeat-x | repeat-y
参数值作用
repeat背景图像在纵向和横向上平铺（默认的）
no-repeat背景图像不平铺
repeat-x背景图像在横向上平铺
repeat-y背景图像在纵向平铺
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景平铺</title>
		<style type="text/css">
			div {
				width: 800px;
				height: 800px;
				background-color: pink;
				background-image: url(../img/莱莎.jpg);
				/* 1.背景图片不平铺 */
				/* background-repeat: no-repeat; */
				/* 2.默认的情况下，背景图片是平埔的 */
				/* background-repeat: repeat; */
				/* 3.沿着x轴平铺 */
				/* background-repeat: repeat-x; */
				/* 4.沿着y轴平铺 */
				background-repeat: repeat-y;
				/* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色 */
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

在这里插入图片描述

背景图片位置

利用background-position属性可以改变图片在背景中的位置

background-position:x y;

参数代表的意思是：x坐标和y坐标，可以使用方位名词或者精神单位

参数值说明
length百分数|有浮点数字和单位标识符组成的长度值
positiontop | center | bottom | left | center | right 方位名词

参数是方位名词

  1. 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top 和 top left 效果一致
  2. 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景位置-方位名词</title>
		<style type="text/css">
			div {
				width: 600px;
				height: 600px;
				background-color: pink;
				background-image: url(../img/莱莎.jpg);
				background-repeat: no-repeat;
				/* background-position: 方位名词; */
				/* background-position: center top; */
				
				/* background-position: right center; */
				/* 如果是方位名词 right center 和 center right 效果是等价的 跟顺序没有关系 */
				
				/* background-position: center right; */
				/* 此时 水平一定是靠右侧对齐 第二个参数省略y轴是垂直居中显示的 */
				
				/* background-position: right; */
				/* 此时 第一个参数一定是top y轴 顶部对齐   第二个参数省略x轴是水平居中显示的 */
				background-position: top;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

在这里插入图片描述

若想图片水平方向与垂直方向同时居中，如下

/* 水平与垂直同时居中 */
background-position: center;

在这里插入图片描述

参数是精确单位

  1. 如果参数是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
  2. 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景位置-方位名词</title>
		<style type="text/css">
			div {
				width: 600px;
				height: 600px;
				background-color: pink;
				background-image: url(../img/莱莎.jpg);
				background-repeat: no-repeat;
				/* 20px 50px; x轴一定是20 y轴一定是50 */
				/* background-position: 20px 50px; */
				/* background-position: 50px 20px; 与20 50 的不同 */
				
				background-position: 20px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

在这里插入图片描述

参数是混合单位

  1. 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景位置-混合单位</title>
		<style type="text/css">
			div {
				width: 600px;
				height: 600px;
				background-color: pink;
				background-image: url(../img/莱莎.jpg);
				background-repeat: no-repeat;
				/* 20px center 一定是x为20 y是center 等价于 background-position:20px; */
				/* background-position: 20px center; */
				
				/* 水平是居中对齐,垂直是20px */
				background-position: center 20px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

案例：小图标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景方位案例</title>
		<style type="text/css">
			h3 {
				width: 116px;
				height: 40px;
				background-color: black;
				color: white;
				font-size: 14px;
				font-weight: 400;
				line-height: 40px;		
				background-image: url(../img/nav_search.png);
				background-repeat: no-repeat;
				background-position: left center;
				text-indent: 2em;
			}
		</style>
	</head>
	<body>
		<h3>成长守护平台</h3>
	</body>
</html>

在这里插入图片描述

案例：背景图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超大背景图片案例</title>
		<style type="text/css">
			body {
				background-image: url(../img/王者背景图.png);
				background-repeat: no-repeat;
				background-position: center top;
			}
		</style>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

背景图像固定（背景附着）

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动，后期可以制作视差滚动的效果。

background-attachement:scroll | fixed
参数作用
scroll背景图像是随对象内容滚动
fixed背景图像固定
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景固定</title>
		<style type="text/css">
			body {
				background-image: url(../img/琴瑟仙女%20娑娜1920x1080.jpg);
				background-repeat: no-repeat;
				background-position: center top;
				color: deeppink;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<p>最爱琴女E</p>
		<p>最爱琴女E</p>
		<p>最爱琴女E</p>
		<p>最爱琴女E</p>
		<p>最爱琴女E</p>
		<p>最爱琴女E</p>
		<p>最爱琴女E</p>
		<p>最爱琴女E</p>
		<p>最爱琴女E</p>
		<p>最爱琴女E</p>
		<p>最爱琴女E</p>
		<p>最爱琴女E</p>
		<p>最爱琴女E</p>
		<p>最爱琴女E</p>
		<p>最爱琴女E</p>
		<p>最爱琴女E</p>
		<p>最爱琴女E</p>
		<p>最爱琴女E</p>
		<p>最爱琴女E</p>
		<p>最爱琴女E</p>
		<p>最爱琴女E</p>
		<p>最爱琴女E</p>
		<p>最爱琴女E</p>
		<p>最爱琴女E</p>
		<p>最爱琴女E</p>
		<p>最爱琴女E</p>
		<p>最爱琴女E</p>
		<p>最爱琴女E</p>
		<p>最爱琴女E</p>
		<p>最爱琴女E</p>
		<p>最爱琴女E</p>
		<p>最爱琴女E</p>
	</body>
</html>

在这里插入图片描述

设置固定后效果如下

body {
				background-image: url(../img/琴瑟仙女%20娑娜1920x1080.jpg);
				background-repeat: no-repeat;
				background-position: center top;
				/* 把背景图片固定住 */
				background-attachment: fixed;
				color: deeppink;
				font-size: 20px;
			}

在这里插入图片描述

背景属性复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中，从而节约代码量

使用简写属性是，没有特定的书写顺序，一般习惯约定顺序如下：

background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

background: transparent url(image.jpg) repeat-y fixed top;

body {
				/* background-image: url(../img/琴瑟仙女%20娑娜1920x1080.jpg);
				background-repeat: no-repeat;
				background-position: center top;
			    把背景图片固定住 
				background-attachment: fixed; */
				color: deeppink;
				font-size: 20px;
				background: black url(../img/琴瑟仙女%20娑娜1920x1080.jpg) no-repeat fixed center top;
			}

背景颜色半透明

CSS3为我们提供了背景颜色半透明的效果

background: rgba(0,0,0,0.3);
  1. 最后一个参数是aipha透明度，取值范围在0~1之间
  2. 0.3的0可以省略，写为background:rgba(0,0,0,.3);
  3. 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景透明写法</title>
		<style type="text/css">
			div {
				width: 600px;
				height: 600px;
				/* background-color: black; */
				background: rgba(0,0,0,0.6);
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

背景总结

属性作用值
background-color背景颜色预定义的颜色值/十六进制/RGB代码
background-image背景图片url（图片路径）
background-repeat是否平铺repeat/no-repeat/repeat-x/repeat-y
background-position背景位置length/position 分别是x和y坐标
background-attachment背景附着scroll（背景滚动）/ fixed（背景固定）
背景简写书写更简单背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
背景色半透明背景颜色半透明background:rgba(0,0,0,0.3); 后面必须是4个值

案例：五彩导航

练习价值：

  1. 链接属于行内元素，但是此时需要宽度高度，因此需要模式转换
  2. 里面文字需要水平居中和垂直居中，因此需要单行文字垂直居中的代码
  3. 链接里面需要设置背景图片，因此需要用到背景的相关属性设置
  4. 鼠标经过变化背景图片，因此需要用到链接伪类选择器
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>五彩导航</title>
		<style type="text/css">
			.nav a {
				display: inline-block;
				width: 120px;
				height: 67px;
				background-color: deeppink;
				text-align: center;
				line-height: 60px;
				text-decoration: none;
			}
			.nav .bg1 {
				background: url(../img/904950.png) no-repeat;
			}
			.nav .bg1:hover {
				background-image: url(../img/850354.jpg);
			}
			.nav .bg2 {
				background: url(../img/1050919.png) no-repeat;
			}
			.nav .bg2:hover {
				background-image: url(../img/1050135.jpg);
			}
			.nav .bg3 {
				background: url(../img/1053217.jpg) no-repeat;
			}
			.nav .bg3:hover {
				background-image: url(../img/850354.jpg);
			}
			.nav .bg4 {
				background: url(../img/1050135.jpg) no-repeat;
			}
			.nav .bg4:hover {
				background-image: url(../img/1050919.png);
			}
			.nav .bg5 {
				background: url(../img/850354.jpg) no-repeat;
			}
			.nav .bg5:hover {
				background-image: url(../img/904950.png);
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<a href="#" class="bg1">五彩导航</a>
			<a href="#" class="bg2">五彩导航</a>
			<a href="#" class="bg3">五彩导航</a>
			<a href="#" class="bg4">五彩导航</a>
			<a href="#" class="bg5">五彩导航</a>
		</div>
	</body>
</html>

在这里插入图片描述

鼠标经过第三个图片效果，其他图片效果一致

在这里插入图片描述

最爱琴女E
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS学习笔记.zip
01-01
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
CSS 学习笔记
01-19
id的优点（class的缺点）：id写在css用#选择器，class写在css中用.选择器。#选择器的优先级高于.选择器大约10倍，所以当你需要提升优先级的时候，id标签，或者id容器内的标签将是很容易和有效的。而class标签，或者...
CSS入门学习笔记+案例
热门推荐
itboy
06-16 29万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
CSS学习笔记整理
bfbshs_ddd的博客
12-16 1624
整理过去的CSS学习笔记。CSS 即 层叠样式表/CSS样式表/级联样式表，也是标记语言， 用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距）以及版面的布局和外观显示样式
尚硅谷CSS学习笔记
MissXu666的博客
10-10 1144
等等），导致节点位置发生变化，此时触发浏览器重排（reflow），需要重新生成渲染树。③维护方面：CSS Sprites在维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片，无需改的地方尽量不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。我们在编码时，不用过于关注浏览器的私有前缀，不用去记忆，去查询，因为常用的css3 新特性，主流浏览器都是支持的，对于老版本浏览器，我们也可以借助现代构建工具，去帮我们添加私有前缀。
CSS学习笔记
m0_58761900的博客
09-18 3029
5.1 边框:border 5.2 内边距：padding 5.3 外边距:margin 5.4 块级元素的水平居中 7.1 弹性布局：flex 7.2 水平方向的排列方式：justify-content 7.3 垂直方向的排列方式：align-items
CSS学习笔记：背景图片样式
weixin_42576837的博客
10-16 1449
CSS学习笔记
css学习笔记之展开列表图标动画
weixin_65808257的博客
04-07 2248
蓝色界面”风格的填充的星图标欢迎下载填充的星矢量图标，“蓝色界面”风格。格式有png、svg、pdf、html代码。可对填充的星图标、符号进行修改、调整大小、修改颜色。今天在这个网站看到了上面类似的效果，然后就想弄一个，然后就有了上面的。
css学习笔记1
qq_42236791的博客
12-12 896
HTML（结构）、CSS（表现）、行为（JavaScript）CSS的全称：层叠样式表（Cascading Style Sheets）。CSS也是一种标记语言，用于给HTML结构设置样式，例如：文字大小、颜色、元素宽高等。简单理解：CSS可以美化HTML，让HTML更漂亮。核心思想：HTML搭建结构，CSS添加样式，实现了：结构与样式的分离。
CSS-基础-MDN文档学习笔记
qq_57508808的博客
02-16 1288
完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容CSS 中的书写模式是指文本的排列方向是横向还是纵向的可以使用进行属性间的切换：块流向从上至下，对应的文本方向是横向的：块流向从右向左，对应的文本方向是纵向的：块流向从左向右，对应的文本方向是纵向的属性实际上设定的是页面上块级元素的显示方向，而这决定了文本的方向。
EPICS工具CSS学习笔记
qq_43456972的博客
10-13 2085
控制系统工作室(CSS)是一项实现控制系统相关的应用，主要针对的是操作员界面。它是基于目前的软件技术（Java、Eclipse），并特别强调了互操作性。 使用Centos7.0系统作为EPICS环境开发，搭建了CSS基础的控件操作，并成功运行。
CSS学习笔记Padding 属性中参数的定义与使用
10-30
css padding缩写技巧
Html与Css学习笔记以及经验总结
06-23
本资源主要是我业余学习Html与css相对完善的学习资源，记录了html最全面的学习经验，以及业余制作的小练习
(css)el-tabs滚动按钮浮动问题
nyf_unknow的博客
06-11 248
思路：找到相应元素，降低层级。
css预处理是什么？作用是什么？
tianxianghuiwei的博客
06-13 430
预处理器如Sass（SCSS）、Less和Stylus等，通过引入这些特性，使得开发者能够更高效地管理和组织大型的样式表，同时提升了代码的重用性和可读性。它们的引入使得开发者可以以更简洁、更高效的方式编写CSS，同时能够利用现代开发技术提升代码的重用性和可读性，是现代前端开发中常用的工具之一。：允许定义变量来存储颜色、字体大小、间距等，可以在整个样式表中统一管理和调整，提高了代码的灵活性和可维护性。：通过以上特性，开发者能够更高效地组织和管理大型项目的样式代码，提升了可读性和可维护性。
什么是CSS的:target选择器
ggq53219的博客
06-13 260
选择器只影响URL中当前的目标元素。如果用户刷新页面或者导航到另一个页面，然后再回来，之前的选中状态将不会保留，除非使用JavaScript或其他技术来保持状态。选择器用于选择当前活动的目标元素。当页面上的一个链接被点击，并且该链接指向一个页面内的元素（通过ID）时，被链接的元素就会成为目标元素，此时。这种选择器常常与页面内的导航（如Tab导航、折叠面板等）和“返回顶部”功能一起使用。下面是一个简单的例子，展示了如何使用。的元素）就会被选中，并且。，从而显示该元素的内容。在这个例子中，所有的。
HTML-CSS练习例子
pacong的博客
06-09 1207
HTML CSS 练习 https://icodethis.com 作为前端练习生。不敲代码只看，入门是很慢的，所以直接实战是学习前端最快的途径之一。 这个网站练习HTML CSS的，可以打开了解一下，可以每天打卡，例子简单，循序渐进，设计的也比较好看。 下面是练习，当然布局的方法有很多，下面是一种。 01基础 这是第一个练习，但是很多大佬做出了，很多不一样的效果 比如： 设计稿 代码 <!DOCTYPE html> <html lang="en"> <head&
使用ant-design/cssinjs向plasmo浏览器插件的内容脚本content中注入antd的ui组件样式
最新发布
06-14 583
但是方法就是比较繁琐，需要将antd的样式拷贝出来，然后贴到一个单独的css样式文件中，然后引入到内容脚本中。
html5&css3学习笔记下载
09-21
4. 本地存储：HTML5提供了本地存储功能，包括LocalStorage和SessionStorage，可以在客户端存储数据，减少对服务器的请求，提高网页性能。 5. 响应式设计：HTML5支持响应式布局，即能够根据设备的屏幕大小和分辨率...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值