【CSS】 Css背景图片及背景渐变综合知识和技巧大全(代码实例)
2023-09-11 14:15:11 时间
background-image:url("baif.png"); | 背景图片地址 |
背景图片大小设置 | |
background-size:30%; | 0%~100%之间的任何值,将背景图片宽高按百分比显示,当设置一个值的时候同也将其作为图片宽度来等比缩放 |
background-size:50px 30px | 第一个值为宽,第二个值为高,当设置一个值时,将其作为图片宽度来等比缩放 |
background-size:cover | 将背景图片等比缩放填满整个容器 |
background-size:contain | 将背景图片等比缩放至某一边紧贴容器边缘 |
background-size:auto | 默认值,不改变背景图片的高度和宽度 |
背景图片的平铺方式 | |
background-repeat: repeat-x; | 横向重复平铺 |
background-repeat: repeat-y; | 纵向重复平铺 |
background-repeat: no-repeat | 不重复平铺,只显示一个图片 |
设置背景图片的位置 | |
background-position:center; | 上下左右居中 |
background-position: top left right bottom; | 上下左右任意组合定位 |
background-position: right 20px top 7px; | 设置右边距 |
background-position-x: 10px; | 左边x坐标起点定位 |
background-position-y: 10px; | 右边x坐标起点定位 |
background-attachment:scroll; | 滚动条 |
background-attachment:fixed; | 固定 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body {
background-color: rgb(223, 223, 223);
}
.city {
width: 500px;
height:500px;
background-color: rgb(233, 203, 158);
padding-left: 20px;
/* border: 10px rgb(238, 7, 7) double; */
/* 背景图片地址*/
background-image:url("https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png");
/* 背景图片大小*/
background-size:30%;/* 0%~100%之间的任何值,将背景图片宽高按百分比显示,当设置一个值的时候同也将其作为图片宽度来等比缩放 */
background-size:50px;/* 第一个值为宽,第二个值为高为auto默认将其作为图片宽度来等比缩放 */
background-size:50px 30px;/* 第一个值为宽,第二个值为高,当设置一个值时,将其作为图片宽度来等比缩放 */
/*background-size:cover;/* 将背景图片等比缩放填满整个容器 */
/* background-size:contain;/* 将背景图片等比缩放至某一边紧贴容器边缘 */
/* background-size:auto;/* 默认值,不改变背景图片的高度和宽度 */
/* 背景图片的平铺方式 */
background-repeat: repeat-x; /* 横向重复平铺 */
background-repeat: repeat-y; /* 纵向重复平铺 */
background-repeat: no-repeat; /* 不重复平铺,只显示一个图片 */
/* 设置背景图片的位置*/
background-position:center; /* 上下左右居中*/
background-position: top left right bottom; /* 上下左右任意组合定位*/
background-position-x: 10px; /* 左边x坐标起点定位*/
background-position-y: 10px; /* 右边x坐标起点定位*/
background-attachment:scroll; /* 滚动条*/
background-attachment:fixed; /* 固定*/
}
</style>
<body>
<div class="city">
</div>
</body>
</html>
背景渐变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body {
background-color: rgb(223, 223, 223);
}
.city {
width: 500px;
height:500px;
/* 【1】-【线性渐变】 */
/* linear-gradient() 可添加多个颜色 */
background-image:linear-gradient(red,yellow);
background-image:linear-gradient(red,yellow,black);
/* 方向:to left(向左),to right,to bottom,to top,xxxdeg deg(度数)*/
background-image:linear-gradient(to top left,red,yellow,black);
background-image:linear-gradient(0.35turn,red,yellow,black); /*圈的角度*/
/* 【2】-【径向渐变】*/
/* redial-gradient(大小 at 位置,颜色 位置,颜色 位置,颜色 位置) */
/* 大小 circle圆形 elllipse椭圆 closest-side近边 closest-corner近角 farthest-side远边 farthest-corner圆角 */
/*位置*/
background: radial-gradient( #f00,#ff0,#0f0);
}
</style>
<body>
<div class="city">
</div>
</body>
</html>
相关文章
- 教程-Python实例-发送邮件功能
- CSS - 工具类 tool.css
- activiti自定义流程之Spring整合activiti-modeler5.16实例(七):任务列表展示
- 类命名空间与对象、实例的命名空间 面向对象的组合用法
- java使用Rome解析Rss的实例(转)
- 使用python装饰器计算函数运行时间的实例
- 利用Python进行异常值分析实例代码
- 一道有趣的OSPF配置实例——OSPF P2P接口妙用
- Java监听器完整入门实例
- 为什么CSS这么难学?css核心知识点攻坚指南
- Atitit.css 规范 bem 项目中 CSS 的组织和管理
- Atitit.css 规范 bem 项目中 CSS 的组织和管理
- 5种GaussDB ETCD服务异常实例分析处理
- 从零开始学习python | 实例讲解如何制作Python模式程序
- Vue服务端渲染Nuxt.js实例
- MyEclipse下XFire开发Webservice实例
- CSS_使用css布局
- CSS定位常见方式与实例应用
- Aurora8B10B IP使用 -04- IP例程应用实例
- 语义实例分割1-02:snake(实时实例分割))-官方数据训练测试,环境搭建等
- 【CSS】css常用复杂选择器都有哪些?看这一篇就够了_07
- 【CSS】表格、定位_普通流定位与浮动定位、其他css常用属性_05
- 【CSS】css概述、语法规范、基础选择器_01
- HTML+CSS+jquery代码实例:水波纹效果与纯HTML CSS和jquery(拿来就能用)
- 模型实战(2)之YOLOv5 实时实例分割+训练自己数据集
- iStack与CSS配置实例