前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >css渲染(三)颜色与背景

css渲染(三)颜色与背景

作者头像
柴小智
发布2018-04-10 17:35:15
1.3K0
发布2018-04-10 17:35:15
举报
文章被收录于专栏:菜鸟计划

颜色的应用主要分为前景色、背景色和透明三个部分。

一、前景色

color

  color前景色

  值: <color> | inherit

  初始值: 用户代理特定的值

  应用于: 所有元素

  继承性: 有

一般来说,前景是元素的文本,不过前景还包括元素周围的边框。有两种方式直接影响一个元素的前景色,可以使用color属性,也可以使用属性border-color设置边框颜色。

二、透明度

opacity

  opacity是CSS3中专门用来设置透明度的一个属性,opacity只能给整个元素设置一个透明度,并且其透明度直接会继承给其后代元素

  值: value | inherit

  value:默认值是1,可以取0-1的任意浮点数。其中,1表示完全不透明,0表示完全透明

  初始值: 1

  应用于: 所有元素

  继承性: 无

代码语言:javascript
复制
opacity: 0.8;

三、背景色

[注意]所有背景属性都不能继承

背景颜色

背景色background接受所有合法的颜色,背景颜色不能继承,其默认值是transparent。

代码语言:javascript
复制
background-color: red; 

背景图像

背景图像background-image会放在所指定的背景颜色之上,初始值: none

代码语言:javascript
复制
background-image: url("image/1.jpg");

背景平铺

背景平铺的属性值中space和round是CSS3新增的值。space表示背景图像的两端对齐平铺,多出来的空间用空白代替;round也表示背景图像的两端对齐平铺,但多出来的空间通过自身拉伸来填充。

值: repeat | repeat-x | repeat-y | no-repeat | space | round | inherit

代码语言:javascript
复制
background-repeat: repeat;

背景定位

背景定位background-position,初始值: 0% 0%

值:  <length> | left | center | right | top | center | bottom 

代码语言:javascript
复制
background-position:center ;        //图的中间和元素中间对齐
background-position: 10px 20px;     //水平方向10px,垂直方向20px

背景裁切

背景裁切(background-clip)属性用来定义背景图像的裁剪区域。

值:background-clip: padding-box || border-box || content-box

在webkit内核下支持text属性

-webkit-background-clip: text;

代码语言:javascript
复制
background-clip: content-box;

背景尺寸

使用背景尺寸(background-size)属性可以指定背景图片的尺寸,可以控制背景图片在水平和垂直两个方向的缩放,也可以控制图片拉伸覆盖背景区域的方式,甚至还可以截取背景图片。

代码语言:javascript
复制
background-size: 20px 30px;
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-03-03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • color
  • 二、透明度
  • opacity
  • 三、背景色
  • 背景颜色
  • 背景图像
  • 背景平铺
  • 背景定位
  • 背景裁切
  • 背景尺寸
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档