HTML——背景样式

最新推荐文章于 2023-07-22 00:23:34 发布

Jhinhua

最新推荐文章于 2023-07-22 00:23:34 发布

阅读量435

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/piduocheng0577/article/details/104899525

版权

Web前端专栏收录该内容

72 篇文章 2 订阅

订阅专栏

背景样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景的样式设计</title>
		<style>
			div{
				/* 设置宽度 
				单位 px 像素 或者 %（占父标签的百分之多少）
				*/
				width: 100%;
				/* 设置高度 */
				height: 300px;
				/* 背景颜色 */
				/* background-color: red; */
				/* background-color: #aafcbe; */
				/* background-color: rgb(252, 162, 150); */
				/* background-color: rgba(255, 12, 35,0.5); */
				/* background-color: hsl(10, 100%, 0%); */
				
				/* 设置背景图片 */
				/* background-image: url(../img/动漫.jpg); */
				/* 图片大小 = 标签大小  正好设置背景图
					图片大小 > 标签大小  按照标签大小截取图片设置为背景图
					图片大小 < 标签大小  平铺的现象
				*/
			   /* 设置平铺的效果 
			   no-repeat 不出现平铺的状态  图片默认在左上角
			   repeat-x 横向平铺 纵向不平铺
			   repeat-y 横向不平铺 纵向平铺
			   repeat 平铺默认值
			   */
			   /* background-repeat: no-repeat; */
			   
			   /* 背景图位于标签的中央 
			   相对于标签移动背景图的位置
			   横向移动  left(默认的)  center  right  自定义数值（距离左边多少，向右移动值为正 反之为负）
			   纵向移动   top(默认)  center  bottom  自定义数值(距离上边多少， 向下移动值为正 反之为负)
			   */
			  /* 如果横向和纵向一样 写一个值即可 */
			  /* background-position: center center; */
			  /* background-position: center; */
			  /* background-position: -100px 100px; */
			  
			  /* 上面三个行为合并成一个方法 
			  1. url引入图片路径
			  2. 是平铺的状态
			  3.水平移动
			  4.垂直移动
			  */
			  /* background: url(../img/动漫.jpg) no-repeat center bottom; */
			  
			  /* 设置背景颜色过渡 */
			  /* 线性过渡 
			  linear-gradient(方向， 颜色值1，颜色值2， 颜色值3...)
					方向不设置的话默认为从上到下的 to bottom
						从下到上 to top
						从左到右 to right
						从有到左 to left
						从右下到左上		to top left
						从左下到右上		to top right
									to bottom left
									to bottom right
						还可以设置成角度
							odeg 从下到上的渐变
							180deg 从上到下
							90deg  从左到右
							270deg 从右到左
					
			  */
			  /* background: linear-gradient(30deg,red, orange, yellow, green, cyan, blue, purple); */
				/* 设置 椭圆形渐变 
				radial-gradient(形状, 颜色值， 颜色值...)
				形状默认为椭圆
				可以设置为circle  变成圆
				*/
				/* background: radial-gradient(red, orange, yellow, green, cyan, blue, purple); */
				background: radial-gradient(circle,red, orange, yellow, green, cyan, blue, purple);
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

Jhinhua

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML——背景样式

背景样式 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>背景的样式设计</title> <style> div{ /* 设置宽度单位 px 像素或者 %（占父标签的百分之多少） */...
复制链接

扫一扫

专栏目录