-
背景样式
<!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>
HTML——背景样式
最新推荐文章于 2023-07-22 00:23:34 发布