信ID:WEB_wysj(点击关注) ◎ ◎ ◎ ◎ ◎◎◎◎◎一┳═┻︻▄
(页底留言开放,欢迎来吐槽)
● ● ●
难题:直接设置一个半透明的边框不起作用。
解决方案:padding-box盒模型border:10px solid rgba(255,255,255,.5);background: white;background-clip: padding-box;
背景知识:box-shadow 的基本用法
box-shadow: X轴偏移量 Y轴偏移量 [模糊半径] [扩展半径] [阴影颜色] [投影方式];
解决方案一:
利用box-shadow的属性扩张半径background:
yellowgreen;box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink, 0 2px 5px 15px rgba(0,0,0,.6);
特点:box-shadow 方案只能模拟实线边框,会贴合元素的圆角
解决方案二:outline 方案background: yellowgreen;border: 10px solid #655;outline: 5px solid deeppink;特点:实现的“边框”不会贴合元素的圆角,可以实现虚线边框
示例:实现一个背景图在div右下角,距离右边10px 下边10px 如图;
解决方案一:background-position扩展方案background: #58a url(code-pirate.svg) no-repeat bottom right;background-position: right 10px bottom 10px;
解决方案二:background-origin 方案padding: 10px;background: url("code-pirate.svg") no-repeat #58a bottom right; /* 或 100% 100% */background-origin: content-box;
解决方案三:calc 方案background: url("code-pirate.svg") no-repeat;background-position: calc(100% - 20px) calc(100% - 10px);
两个div很容易实现,那么一个div呢?
解决方案:利用box-shadow和outlinebackground: tan;border-radius: .8em;padding: 1em;outline: .6em solid #655;box-shadow: 0 0 0 .4em #655;
box-shadow的宽要小于outline宽度值,大于 (Math.sqrt(2)-1)r(这里的 r 表示 border-radius)
背景知识:CSS 线性渐变,background-size
案例一:等宽的双色水平条纹
background: linear-gradient(#fb3 50%, #58a 0);background-size: 100% 30px;
案例二:不等宽的双色水平条纹
background: linear-gradient(#fb3 30%, #58a 0);background-size: 100% 30px;
案例三:三色水平条纹
background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);background-size: 100% 45px;
案例四:垂直条纹
background: linear-gradient(to right, /* 或 90deg */ #fb3 50%, #58a 0);background-size: 30px 100%;
案例五:斜向条纹
失败方案:改变 background-size 的值和渐变的方向background: linear-gradient(45deg, #fb3 50%, #58a 0);background-size: 30px 30px;
正确方案:做到无缝拼接(60度的条纹不好做)background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);background-size: 30px 30px;
优化方案:重复渐变做60度条纹background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);height:100%;
案例六:灵活的同色系斜向条纹
在大多数情况下,我们想要的条纹图案并不是由差异极大的几种颜色组成的,这些颜色往往属于同一色系。
失败方案:没有任何浏览器支持下面这个特性background: repeating-linear-gradient(60deg, #fb3 0 15px, #58a 0 30px);正确方案:不再为每种条纹单独指定颜色,而是把最深的颜色指定为背景色,同时把半透明白色的条纹叠加在背景色之上来得到浅色条纹background: #58a;background-image: repeating-linear-gradient(30deg, hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px, transparent 0, transparent 30px);
背景知识:CSS 渐变,“条纹背景”
CSS3 图案库lea.verou.me/css3patterns
背景知识:CSS 渐变,“条纹背景”,“复杂的背景图案”
大自然不会以“无缝”贴片的方式重复自己......
蝉原则:通过质数来增加随机真实性
蝉渐变图案:条纹图案把不同尺寸的渐变图案叠加起来,并使用质数来增加随机的真实感
background: hsl(20, 40%, 90%);background-image: linear-gradient(90deg, #fb3 11px, transparent 0), linear-gradient(90deg, #ab4 23px, transparent 0), linear-gradient(90deg, #655 41px, transparent 0);background-size: 41px 100%, 61px 100%, 83px 100%;
背景知识:CSS 渐变,基本的 border-image,“条纹背景”,基本的 CSS 动画案例一:一个元素有一圈装饰性的边框,基本上就是一张图片被裁剪进了边框所在的方环区域。不仅如此,我们还希望这个元素的尺寸在扩大或缩小时,这幅图片都可以自动延伸并覆盖完整的边框区域。
最简单的办法是使用两个HTML 元素:一个元素用来把我们的石雕图片设为背景,另一个元素用来存放内容,并设置纯白背景,然后覆盖在前者之上。问题来了:如果只用一个元素,我们能做到这个效果吗?
解决方案:padding: 1em;border: 1em solid transparent;background:linear-gradient(white, white) padding-box,url(stone-art.jpg) border-box 0 / cover;
案例二;老式信封样式的边框
案例三:蚂蚁行军边框
@keyframes ants { to { background-position: 100% } }.marching-ants {padding: 1em;border: 1px solid transparent;background:linear-gradient(white, white) padding-box,repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0 / .6em .6em;animation: ants 12s linear infinite;}
案例四:边框的裁切效果,用来模拟传统的脚注
border-top: .2em solid transparent;border-image: 100% 0 0 linear-gradient(90deg, currentColor 4em, transparent 0);padding-top: 1em;
干货!免费领取腾讯高级讲师网页设计教程
点我领取
☝☝☝
关注网页设计自学平台,99%的努力都在这里
▼无法识别二维码可以点「阅读原文」噢!
如果网页只有一种颜色,那是非常可怕的,颜色的设置丰富了网页,就如同多彩缤纷的世界。
在了解css颜色之前,我们回顾下计算机是如何显示颜色的?计算机根据色光三原色的原理通过各种算法来显示颜色。
网页中使用颜色关键字、16进制字符、rgb、rgba等表示红,绿,蓝三种颜色混合色,如下示例,几种写法都是指同一个颜色(红色):
color:red;
color: #ff0000;
color: rgb(255,0,0)
color: rgba(255,0,0,1)
对于16进制形式,每2位表示一个颜色,从左到右分别是红、绿、蓝,每种颜色取值从00 到 FF。
如下示例:
color: #000000; /*黑色*/
color: #ffffff; /*白色*/
color: #ff0000; /*红色*/
color: #00ff00; /*绿色*/
color: #0000ff; /*蓝色*/
对于rgb的表示法,由三个参数组成,分别是红、绿、蓝,每种颜色取值从0 到 255。
如下示例:
color: rgb(0,0,0); /*黑色*/
color: rgb(255,255,255); /*白色*/
color: rgb(255,0,0); /*红色*/
color: rgb(0,255,0); /*绿色*/
color: rgb(0,0,255); /*蓝色*/
红,绿,蓝值从0到255的结合,给出了总额超过1600多万不同的颜色(256 × 256 ×256)。
但是现代大多数显示器能够显示至少16384种颜色。所以在使用颜色时要格外注意,避免设置不能够显示的颜色,可以参考网页安全色:https://www.w3school.com.cn/cssref/css_colors.asp。
颜色除了有三原色红绿蓝组成,还有亮度层级,如下图:
rgba 中的a是指透明度,这个是css3新增加的属性,通过rgba可以设置更加漂亮的颜色。
通过background属性可以设置元素的背景色、背景图片,语法如下:
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
background 在一个声明中设置所有的背景属性,可以在这里设置如下属性:
各值之间用空格分隔,不分先后顺序。可以只有其中的某些值,例如 background:#FF0000 url(img.png)是允许的,但至少有一个值。
建议使用background 简写属性,这样可以更好地兼容较老的浏览器,少写很多代码,当然你也可以分开使用,比如:
background-color: #ff0000;
background-image: url(img.png);
background-repeat: no-repeat;
background-size: 100% auto;
1、背景颜色 —— background-color
background-color 和之前讲的的color 一样,可以使用16进制、rgb、rgba等设置颜色。如下实例:
<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray; padding: 20px;}
</style>
</head>
<body>
<h1>背景色1</h1>
<h2>背景色2</h2>
<p>背景色3</p>
<p class="no2">背景色4</p>
</body>
</html>
如下图显示:
注意:background-color: transparent; 指透明色,不显示任何颜色。
2、背景图片的使用——background-image
给html元素添加背景图片,在早期网页制作中被广泛应用,如今已不建议大量使用。如下实例:
body {background-image:url(/static/bg.gif);}
这里使用了一个125*125大小的图片,如下:
但是你会发现,整个网页铺满了图片,上面的代码默认会铺满整个页面从左到右,从上到下 。如果不想被平铺,可以使用background-repeat 设置。
背景图片同时可以设置多个背景图片,如下:
background-image: url(/statics/bg1.gif), url(/statics/bg2.gif);
多个图像以逗号隔开,在页面中多个图片会叠加显示,第一张图片显示在最顶端。
如下效果:
3、背景重复方式 —— background-repeat
它有如下几个属性:
repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
repeat-x | 背景图像将在水平方向重复。 |
repeat-y | 背景图像将在垂直方向重复。 |
no-repeat | 背景图像不重复。 |
inherit | 从父元素继承 background-repeat 属性的设置。 |
实例如下:
4、背景图的位置 —— background-position
背景图片默认显示在左上角,语法如下:
background-position: x y; // x 距离左边距离,y距离顶部距离
如果要改变它的位置,可以使用关键字:top、bottom、left、right 和 center;或者使用长度值,如 100px 或 5cm;也可以使用百分数值。
x 可以取值 百分比| 数值| left | center | right。
y 可以取值 百分比| 数值| top| center | bottom。
当只设置一个值的时候,另一个会缺省为 center。
使用关键字,将背景图片水平居中,垂直居中:
background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
使用百分比%:
background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50% 50%;
50% 50% 等同于 center center,显示效果和上图一样。
还可以使用具体数值,比如 px、em、cm等。
background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50px 50px;
显示效果如下:
5、背景图相对于容器的基准点 —— background-origin
就是设置背景图片相对于html元素什么位置作为初始坐标点,语法:
background-origin: padding-box|border-box|content-box;
几种值得含义:
padding-box | 背景图像相对填充框的位置 |
border-box | 背景图像相对边界框的位置 |
content-box | 背景图像相对内容框的位置 |
如下实例:
6、背景图片大小 —— background-size
默认会显示背景图原始尺寸,可以通过此属性设置背景图片在元素上的大小,语法:
background-size: width height;
宽度和高度可以使用 数值、百分比%、cover 及 contain ;
数值:可以使用任何单位的数字,比如 px、em、cm等。如果设置一个值,第二个为"auto(自动)"。
百分比%:相对于其所在html原始宽度和高度,如果设置一个值,第二个为"auto(自动)"。
cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain:把背景图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
如下示例:
7、背景图像是否固定或者随着页面的其余部分滚动
background-attachment 属性有以下几个值:
scroll | 背景图片随页面的其余部分滚动。这是默认 |
fixed | 背景图像是固定的 |
inherit | 指定background-attachment的设置应该从父元素继承 |
local | 背景图片随滚动元素滚动 |
如设置一个固定的背景图片,不跟随页面滚动:
background-attachment:fixed;
滚动滚动条,会发下背景图片始终固定在屏幕那个位置。
8、背景绘制区域 —— background-clip
语法如下:
background-clip: border-box|padding-box|content-box;
border-box | 默认值。背景绘制在边框方框内(剪切成边框方框)。 |
padding-box | 背景绘制在衬距方框内(剪切成衬距方框)。 |
content-box | 背景绘制在内容方框内(剪切成内容方框)。 |
这个属性类似于 background-origin ,只不过它会裁剪背景图片,如下示例:
9、背景层的混合模式 —— background-blend-mode
所谓混合模式就是将图片与颜色或图片与图片进行混合,语法:
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
属性值:
示例如下:
正常模式
luminosity 亮度模式
color 颜色模式
其它模式可以自己试试,看下有什么区别。
到此,我们了解了颜色和背景的使用方法,尤其是背景的使用,由于它的属性很多,可以简写也可以分开写,要想完全掌握,还得多练习,每种属性进行组合使用看看其效果。
一般建议使用 background 简写方式,主要是可以少写很多代码。以上介绍难免有误,或不齐全,欢迎指出错误,并补充。
上篇:前端入门——css链接样式
属性值:transparent(透明的)或color(颜色)
属性值:none(没有)或url(使用绝对或相对地址指定背景图像)
优点:非常便于控制位置(精灵图也是一种运用场景)
属性值:repeat|no-repeat|repeat-x|repeat-y
背景图片会压住背景颜色
background-position:x y;
属性值:scroll(随内容滚动)| fixed(背景固定)
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
*请认真填写需求信息,我们会在24小时内与您取得联系。