【CSS】 Css背景图片及背景渐变综合知识和技巧大全（代码实例）

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>

【CSS】 Css背景图片及背景渐变综合知识和技巧大全（代码实例）相关推荐

h5背景图片尺寸怎么设置_CSS3中background-size实现背景图片大小可自定义的几种效果（代码实例）...
本文目标: 1.掌握background-size背景图片大小的几种设置方法问题: 1.实现以下效果,使用纯DIV+CSS,必须使用background-size 附加说明: 1.背景图片大小本身是 ...
css 背景图片和背景色渐变同时存在
css 背景图片和背景色渐变同时存在 1.垂直渐变效果图: .wrapper {width:500px;height: 500px;background: url(./imabg.png) no-r ...
html背景图片纵向拉伸,背景图片拉伸（CSS方法）_html/css_WEB-ITnose
在布局现在的网站首页的时候,发现一个问题.我使用了一张1440*900的png图片作为背景图片.页面内的Div使用了较多的百分比自适应框体大小,原body元素的CSS如下 html { width: ...
Web前端，CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写
前言持续总结输出中,今天分享的是Web前端,CSS中关于背景颜色.背景图片.背景平铺.背景位置.背景相关属性连写 1.背景颜色 background-color(bgc) 颜色取值: 关键字.rgb ...
Css的背景（背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定）
通过css背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图片位置.背景图像固定等. 背景颜色: Background-color:#******: < ...
CSS的背景属性设置(背景颜色、背景图片、背景平铺、背景附着、背景复合写法)
文章目录 1 背景颜色 2 背景图片 3 背景平铺 4 背景图片位置 5 背景图像固定(背景附着) 6 背景复合写法 7 背景色半透明 8 背景总结案例:五彩导航通过CSS背景属性,可以给页面元素 ...
【CSS】CSS 背景设置 ④ ( 超大背景图片设置 | 背景图片定位设置 background-position: center top； )
文章目录一.超大背景图片设置 1.超大背景图片问题 2.超大背景图片默认显示 3.超大背景图片推荐定位方式 4.超大背景图片编辑策略二.代码示例 1.背景图片展示 2.代码示例 3.展示效果一. ...
关于在IE下打印页面背景图片和背景颜色丢失的解决方案
最近遇见在IE8下实现页面部分打印背景图片和背景颜色丢失的问题网上查了许久,总结下有两种解决方案: 1.在IE的工具里,Internet选项-->高级-->打印(打印背景颜色和图像)选中 ...
计算机wold标题文字加背景,office word文档添加背景图片以及背景颜色来美化枯燥乏味的文字...
在浏览网页的时候,遇到各式各样的好看图片是常用的事,现在的需求就是如何将这些看似比较不错的图片设置为Word的文档背景.设置背景的目的是为了美化文字的同时还可以为文档增姿添彩.看到这里大家是不是有点迫 ...

【CSS】 Css背景图片及背景渐变综合知识和技巧大全（代码实例）

【CSS】 Css背景图片及背景渐变综合知识和技巧大全（代码实例）相关推荐

最新文章

热门文章