CSS设置背景和渐变色

1. 添加背景色

纯色背景：用background-color
渐变背景：用line-gradient，也可以一次用多个

div {background-color: red;
}div {/* 单个渐变背景 */background: linear-gradient(to bottom, red, green);background: linear-gradient(to bottom, red, green 20%, orange 80%, blue);/* 多个渐变背景 */background: linear-gradient(to bottom, cyan, transparent),linear-gradient(225deg, magenta, transparent),linear-gradient(45deg, yellow, transparent);
}

效果如下：

2. 添加背景图

background属性官网介绍：https://developer.mozilla.org/zh-CN/docs/Web/CSS/background

图片背景：可以合在一起background；也可以单独写每个属性，例如background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size，和 background-attachment等

渐变背景：linear-gradient

div {/* 将背景设为一张居中放大的图片 */background: no-repeat center/50% url("../images/icon_test.png");
}
div {background-image: linear-gradient(to bottom, red, green 20%, orange 80%, blue);background-image: linear-gradient(to bottom, cyan, transparent),linear-gradient(225deg, magenta, transparent),linear-gradient(45deg, yellow, transparent);
}

效果：

3.添加背景图和背景色混合

div {/* 中间是图片，四周是背景色 */background: url("../images/icon_test.png") center/50% no-repeat, linear-gradient(to bottom, red, green);/* 上部分是图片，后面是渐变背景色 */background: url("../images/icon_test.png") 0 0 no-repeat, linear-gradient(to right bottom,  red 200px, green);
}// 我的代码
div {background: url('../images/icon_bg.png') 0 0 no-repeat, linear-gradient(to bottom, #FCFDFD, #FCFDFD);// background: #FCFDFD url('../images/icon_bg.png') 0 0 no-repeat;background-size: 100%;
}

CSS设置背景和渐变色相关推荐

php设置背景图片的代码,css设置背景图片如何实现？（代码实例）
本篇文章给大家带来的内容是关于css设置背景图片如何实现?(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 很多人提交表单时都喜欢用一个图片来作为提交按钮,大多数人可能用J ...
php设置背景为透明,css如何设置背景颜色透明？css设置背景颜色透明度的两种方法介绍...
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
background-position—CSS设置背景图片的位置
background-position :在 CSS 中通过 background-position 属性可以调整背景图片的位置.因为在默认情况下背景图片都是从设置了 background-posit ...
css 设置背景图片模糊，内容不模糊
方案: 内容和图片分别置于一个div,通过css设置背景div模糊度,设置内容div绝对位置. <!DOCTYPE html><html lang="en"> ...
html背景图片只显示一张图片,img只显示图片一部分或 css设置背景图片只显示图片指定区域(示例代码)...
17:14 2016/3/22 img只显示图片一部分或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...
css设置背景图片模糊，内容不模糊
需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 解决方法:内容和图片分别置于一个div,通过css设置背景div模糊度,设置内容div绝对位置. ...
html设置背景图片高度,如何使用CSS设置背景图像的大小？
如何使用CSS设置背景图像的大小?下面本篇文章就来给大家介绍一下使用CSS设置背景图像大小的方法,希望对大家有所帮助. image CSS background-size属性可用于设置背景图像大小:使 ...
html如何把图片在背景图一半,img只显示图片一部分或 css设置背景图片只显示图片指定区域...
17:14 2016/3/22 img只显示图片一部分或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...
Html设置背景图模糊,CSS设置背景图片模糊内容不模糊的解决方法
需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 解决方法:内容和图片分别置于一个div,通过css设置背景div模糊度,设置内容div绝对位置, ...
css如何设置背景颜色透明？css设置背景颜色透明度的两种方法介绍
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...

CSS设置背景和渐变色

1. 添加背景色

2. 添加背景图

3.添加背景图和背景色混合

CSS设置背景和渐变色相关推荐

最新文章

热门文章