CSS3 背景和效果

背景颜色

其实在上一章，我们已经使用过。

<div style="background: #9BCD9B;">CSS 背景颜色</div>

效果

背景图片

代码

<!-- background: url(图片路径) -->

<div style="width:500px;height:200px; background: url('https://www.jmjc.tech/public/home/img/flower.png')"></div>

效果

重复

默认的情况，背景图片的一直重复的，直到整个盒子的位置被占用。我们可以关闭掉默认重复这个属性。

<!-- no-repeat 不重复-->
<!-- repeat 重复 (默认值)-->
<!-- repeat-x repeat-y 只重复横向或者纵向 -->

<div style="width:500px;height:200px; background: url('https://www.jmjc.tech/public/home/img/flower.png') no-repeat "></div>

效果

位置

我们还能设置背景图片在盒子中的位置。

<!-- 位置是根据%微调的，50% 50% 水平居中 垂直居中-->

<div style="width:500px;height:200px; background: url('https://www.jmjc.tech/public/home/img/flower.png') no-repeat 50% 50%"></div>

效果

background: 图片地址 是否重复 显示位置。这就是我们常用到的定义背景图片的全部。

透明

CSS3一大新的特性，就是增加了更种各样的效果，各家浏览器厂商支持的也不同，这里列举三个常用的，也是所有浏览器支持的。

<!-- 背景透明，这个最为简单，但也是最常用。 -->
<!-- opacity: 0.2;  （透明度0.1 ～ 1 ）-->

<div style="width:500px;height:200px; background: yellow; opacity: 0.2; "></div>

效果

圆角

代码

<!-- border-radius: 单位; -->

<div style="width:300px; height:300px;background: #90EE90;border-radius:15px;"></div>

效果

渐变

渐变也是一个有特色的代表。

<!-- 从左往右 red, orange, yellow 这三种颜色渐变填充 -->

<div style="background-image: linear-gradient(to right, red, orange, yellow);">CSS3 渐变</div>

效果