专栏首页菜鸟计划css渲染(三)颜色与背景

css渲染(三)颜色与背景

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

一、前景色

color

  color前景色

  值: <color> | inherit

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

  应用于: 所有元素

  继承性: 有

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

二、透明度

opacity

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

  值: value | inherit

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

  初始值: 1

  应用于: 所有元素

  继承性: 无

opacity: 0.8;

三、背景色

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

背景颜色

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

background-color: red; 

背景图像

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

background-image: url("image/1.jpg");

背景平铺

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

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

background-repeat: repeat;

背景定位

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

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

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;

background-clip: content-box;

背景尺寸

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

background-size: 20px 30px;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS选择器的性能优化

    CSS选择器的性能排名(从最快者开始): (1)识别器:#id (2)类:.class (3)标签:div (4)相邻兄弟选择器:a + i (5)父类选择器:...

    dys
  • 试试这4个CSS动画解决方案和资源

    随着移动设备的大量使用和CSS3兼容性在浏览器中的普及,越来越多的程序猿开始设计和使用基于CSS3的动画效果解决方案,但是自己编写基于CSS3的动画效果也是一件...

    前朝楚水
  • 09-移动端开发教程-Sass入门

    1. 引言 CSS3之前的CSS都大都是枚举属性样式,而编程语言强大的变量、函数、循环、分支等功能基本都不能在CSS中使用,让CSS的编程黯淡无光,Sass就是...

    老马
  • 关于css

    常用的选择器:标签选择器,id选择器,class选择器,伪类选择器。 但是还有一个功能强大的选择器:属性选择器, 属性选择器,这样使用, 1、[属性名]{st...

    前朝楚水
  • 30+有用的CSS代码片段

    在一篇文章中收集所有的CSS代码片段几乎是不可能的事情,但是我们这里列出了一些相对于其他的更有用的代码片段,不要被这些代码的长度所吓到,因为它们都很容易实现,并...

    前朝楚水
  • 原生css写响应式网页

    写在前面的话:随着移动设备的逐渐普及和Web技术的发展,跨端的Web开发需求将会越来越大。如何在多种设备上进行跨端的界面适配呢?我们可以利用CSS3的Media...

    前朝楚水
  • css中的伪类与伪元素

    伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪类,一个称为伪元素的原因。 伪类的种类 ...

    前朝楚水
  • CSS选择器是如何确定优先级的?

    先看下面的示例 <div id="content"> <p id="title">Hello world</p> </div> 有如下的2个css选择器...

    dys
  • 02-移动端开发教程-CSS3新特性(中)

    1. 新的背景 背景在CSS3中也得到很大程度的增强,比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。 1.1 background-size设置背...

    老马
  • 05-移动端开发教程-CSS3兼容处理

    CSS3的标准并没有全部定稿,目前CSS3的标准分成了不同的模块,具体的标准由各个模块推动标准和定稿,标准制定的过程中,浏览器也在不断的发新的版本来兼容新的标准...

    老马

扫码关注云+社区

领取腾讯云代金券