美文网首页
hsla background-clip

hsla background-clip

作者: _陈慧敏 | 来源:发表于2015-12-02 13:29 被阅读90次
1.png

大家看到这个div,想想自己如何去实现


然后看下代码

<div class="d1"></div>
.d1{
  height:50px;
  width:50px;
  background:hsla(0,100%,50%,0.4);
  border:10px solid hsla(50,50%,80%,0.6);
  padding:20px;
  background-clip:content-box;
}

使用一个div就可以实现
中间红色为content内容,白色为padding内边距,外面的米黄色为border边框

这里会用到hsla来表示颜色的方法
HSL色彩模式是工业界的一种颜色标准,是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,HSL即是代表色调,饱和度,亮度三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。HSLA是在HSL的基础上增加一个透明度(A)的设置。

然而我们的重点是在background-clip这个CSS3属性
官方的解释为background-clip 属性规定背景的绘制区域,属性值为有border-box,padding-box,content-box

好了我们分别看下效果
改变上面的css为border-box

2.png

这时候我们发现 content内容的颜色会继续衍生到padding 和border去,
所以当值为border-box时,background的值会对边宽和边框内的所有部分都有效

当使用padding-box时

3.png

他的background的颜色只会填充到padding 不会再衍生到border去,

当使用content-box为第一张图的效果

1.png

--》所以background-clip这个属性会对background影响的范围起作用。
而当影响不到padding的颜色时,padding会成透明色 ,看下面例子

<body>
  <div class="d2">
  <div class="d1"></div>
  </div>
</body>
body{
  background:green;
}
.d1{
  height:50px;
  width:50px;
  background:hsla(0,100%,50%,0.4);
  border:10px solid hsla(50,50%,80%,0.6);
  padding:20px;
  background-clip:content-box;
}
.d2{
  width:200px;
  height:200px;
  background:yellow;
}
4.png

这里还有一个background-origin属性,他是对背景图片有效,而background-origin 属性规定 background-position 属性相对于什么位置来定位,以哪里个位置作为0,0起始位位置

相关文章

  • hsla background-clip

    大家看到这个div,想想自己如何去实现 然后看下代码 使用一个div就可以实现中间红色为content内容,白色为...

  • HSLA

  • 揭秘HSLA

    在css中表示颜色有几种方式:十六进制(#fff、#FFFFFF)、RGB(rgb(0, 0, 0)、rgb(25...

  • css3背景和边框

    1、新增属性 background-clip 定义:background-clip 属性规定背景的绘制区域。 语法...

  • css3背景与边框

    1、background-clip 定义: background-clip 属性规定背景的绘制区域。 语法:bac...

  • CSS进阶知识点--背景

    背景图像区域 background-clip 属性 指定背景绘制区域 语法 background-clip:bor...

  • CSS3

    一.css3背景与边框### 1、background-clip定义:background-clip属性规定背景的...

  • 2019-05-19CSS3背景与渐变

    CSS3背景图像区域 background-clip属性 指定背景绘制区域 background-clip:bor...

  • css3:实现半透明边框

    css: border:10px solid hsla(0,0%,100,.5); background:whit...

  • 半透明边框

    半透明颜色:rgba()、hsla() 代码: { border:10px dashed rgba(255,0,0...

网友评论

      本文标题:hsla background-clip

      本文链接:https://www.haomeiwen.com/subject/igujhttx.html