自学前端第二十九天 CSS高级之细节技巧

第二十九天 css高级细节技巧

一.background-color :属性设置元素的背景颜色。

定义和用法

background-color 属性设置元素的背景颜色。

元素背景的范围

background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。

transparent 值 (让背景色透明)

尽管在大多数情况下，没有必要使用 transparent。不过如果您不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计，那么设置 transparent 值还是有必要的。

默认值：	transparent
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.backgroundColor="#00FF00"

可能的值

值	描述
color_name	规定颜色值为颜色名称的背景颜色（比如 red）。
hex_number	规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
rgb_number	规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
transparent	默认。背景颜色为透明。
inherit	规定应该从父元素继承 background-color 属性的设置。

CSS高级特殊个例属性

(visibility,filter,CSS变量,content计数器,cursor,BFC,iframe)

一.visibility VS display:none VS scale(0) VS overflow

visibility 控制一个元素是否可见

visibility: visible(默认) | hidden

深入visibility特性:

1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

2、visibility: hidden不会影响counter计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样

3、CSS3的transition支持visibility属性，但是并不支持display:none属性的，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。

①如下图: visibility:hidden + transition ----- visibility:visible
②切记hover用法不能写错: 是给当前蒙板的父盒子盒子box 加hover , 然后下面的.mask 这样 .

(注意:这种transition只能加在visibility:hidden中,即hidden消失的时候延迟x秒,做不到在visible显示的延迟多少秒…试验过了)

​ transition用在visibility:visible是失效的

5、而opacity: 0 也会被子元素继承，但是不能通过设置子元素opacity: (因为opacity是对于整体元素来透明的,看下面讲解)

11.color 和 bc-color 和 border-color和opacity 的区别:

①Color 和 bc-color 和 border-color 都是整个元素的局部颜色 , 如果只是局部某部分有灰蒙透明效果则用以上样式的rgb形式,调一个透明度出来即可.

②opacity透明度:是整个元素的整体外观颜色,就是整个元素透明度,不管你什么颜色,全部一起透明了

6.总结

六、由以上可以了解到 Visibility:none 和 Display:hidden 的区别

一.visibility:hidden 和display:none的本质区别   ?

1.设置为 visibility:hidden 时 元素不可见但是保留渲染位置 只是视觉上的看不见 

2.而display:none; 实现的效果是 元素不进行渲染 在页面上不存在 

二.
1.display:none;

使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”,隐藏属性值设为none的元素并且释放该元素在文档中所占的物理空间，对于其他元素来说，相当于该元素不存在，因此，该元素的位置被其他元素顶替

2.visibility:hidden;

使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

 

七、什么时候使用Visibility或者Display属性？
Visibility和Display属性虽然都可以达到隐藏页面元素的目的，但它们的区别在于如何回应正常文档流。
如果你想隐藏某元素，但在页面上保留该元素的空间的话，你应该使用visibility：hidden。(比如标题关键字隐藏,爬虫)
如果你想在隐藏某元素暂时不显示的话应该使用display：none。(比如蒙板:mask)

二.filter 滤镜(鸡肋)

filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Filter	描述
none	默认值，没有效果。
blur(px)	给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊； 如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。
brightness(%)	给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。
contrast(%)	调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。
drop-shadow(h-shadow v-shadow blur spread color)	给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。参数如下：``**** **** (必须)这是设置阴影偏移量的两个 值. **** 设定水平方向距离. 负值会使阴影出现在元素左边. ****设定垂直距离.负值会使阴影出现在元素上方。查看****可能的单位.**如果两个值都是0**, 则阴影出现在元素正后面 (如果设置了 and/or ，会有模糊效果).**** (可选)这是第三个code>值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值 若未设定，默认是0 (则阴影的边界很锐利).**** (可选)这是第四个 值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小). 注意: Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。 **** (可选)查看 该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 会应用color**color**属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。
grayscale(%)	将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
hue-rotate(deg)	给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。
invert(%)	反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。
opacity(%)	转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。
saturate(%)	转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。
sepia(%)	将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
url()	URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。例如：filter: url(svg-url#element-id)
initial	设置属性为默认值，
inherit	从父元素继承该属性

原图:

img {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}
/* 模糊 */

<