css分析 - 背景

html-css022

css分析 - 背景,第1张

例子来自colorui及网上一些资源,不定时更新

例子都只取一个,其他的css样式都是类同的

多类选择器例子:

网上看见一个荧光效果,觉得蛮好看就扒过来分析了一下 https://www.jianshu.com/p/c501fee6fb68

荧光效果主要是:before和:after伪元素起的作用,先将其注释起来,看下原本的效果:

可以看见并没有荧光效果。

这个是给2个伪元素添加一个线性渲染的背景

有了上面蒙层的介绍,这个效果就是整体向外拉伸了2px。 z-index: -1 确保在box的黑色背景底下。注释了黑色背景来看下.box:before的效果:

和before一样,就是多了个高斯模糊,注释了黑色背景来看下.box:after的效果:

所以将3层叠加起来就有了荧光和边框效果。

background 是CSS中一个常用的属性,用来修改某个元素的背景;

background 拥有8种属性,常用的是前5种,分别为:

简写模式:

background:#eee url() no-repeat center/cover

参考资料:

https://blog.csdn.net/kk_yanwu/article/details/79489242

写css背景图片代码可以参考以下:

<html>

<head>

<styletype="text/css">

body{background-image:url(abc.jpg)}

</style>

</head>

<body>

</body>

</html>

扩展资料:

1、背景图片语法:{background-image:url(url)|none}

2、背景固定语法:{background-attachment:fixed|scroll} 

3、背景重复语法:{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}

4、背景定位语法:{background-position:数值|top|bottom|left|right|center}

参考资料来源:百度百科-CSS语法