渲染容器 其本身没有单独容器概念，大小只能是元素的border-box.不能选择性的线性渐变内容盒等。 渐变角度 默认值 to bottom 等于 180deg,如果是目标的效果可以不再额外设置。...特别备注: 1:这里的夹角不是与水平线的，我当初也以为是水平夹角； 2.就是如果你希望渐变线到元素的右上角部分，这个部分不一定是45deg,而关键字设置的top right 一定是右上角。...渐变线 图解渐变线的变化 ? 从上面的图中我们可以看到渐变线，也就是当前中心点的垂线旋转渐变角度之后的线，它的长度是与宽高以及角度相关的，可能会超出容器。...我之前的场景的话，也是类似的思路不过是利用的一个线性背景做x方向的重铺，然后中间也是用span标签做白色背景。 – 这种方案的缺点可能是什么？...不考虑兼容 可能的问题有以下几个方面吧：1 背景不是线性渐变可以实现的，还是需要背景图去做 ；2 如果文字有两行或者更多怎么实现 3 元素背景是透明的时候，span的背景会映射线条，如果也设置透明，会有透明效果叠加
亮度也是一个百分点;0％是黑色的，100％是白色的。 HSLA的颜色值是一个带有alpha通道的HSL颜色值的延伸 - 指定对象的透明度。...尽管半透明颜色很受欢迎，但人们对其使用更多集中于背景上。 假设我们想给一个容器设置一层白色背景和一道半透明白色边框，body 的背景会从它的半透明边框透上来。...这就可以解释我们遇到的难题：body 的背景并没有从内部 content 的半透明的白色半透明边框处透上来，而是在半透明白色边框处透出了这个容器自己的纯白实色背景，这实际上得到的效果跟纯白实色的边框看起来完全一样...灵活的背景定位 难题 要求针对容器某个角对背景图片做偏移定位，如右下角。在 CSS 2.1 中，只能指定距离左上角的偏移量，或者靠齐到其他三个角。...实际上，在应对这种情况时，我们可以把最深的颜色指定为背景色，同时把半透明白色的条纹叠加在背景色之上来得到浅色条纹： background : #58a; background-image : repeating-linear-gradient
我们给它们统一添加上一个从绿色到蓝色的渐变背景色： p, a { background: linear-gradient(90deg, blue, green); } 看看效果： 什么意思呢？...我们需要将实际的文本包裹在内联元素 内 实际的文本，利用了 opacity: 0 进行隐藏，实际展示的文本使用了 元素的伪元素，并且将它的层级设置为 -1，目的是让父元素的背景可以盖过它 元素的渐变为从透明到白色...，利用它去遮住下面的实际用伪元素展示的文字，实现文字的渐隐 这样，我们就能得到这样一种效果： 这里， 元素的渐变为从透明到白色，利用后面的白色逐渐遮住文字。...如果我将渐变改为从黑色到白色（为了方便理解，渐变的黑色和白色都带上了一些透明），你能很快的明白这是怎么回事： a { background: linear-gradient(90deg, rgba..., 255, 255, .9)); } 完整的代码，你可以戳这里：CodePen Demo -- Text fades away 当然，这个方案有很多问题，譬如利用了 z-index: -1，如果父容器设置了背景色
一个非常简单的例子，上述我们创造了一个从黑色到透明渐变色，我们将它运用到实际中，代码类似这样： 下面这样一张图片，叠加上一个从透明到黑色的渐变， { background: url(image.png...这个 DEMO，可以先简单了解到 mask 的基本用法。...这里得到了使用 mask 最重要结论：添加了 mask 属性的元素，其内容会与 mask 表示的渐变的 transparent 的重叠部分，并且重叠部分将会变得透明。...background 透明的地方，即 mask 中为 transparent 的部分，实际就是弹幕会被隐藏遮罩的部分，而其他白色部分，弹幕不会被隐藏，正是完美的利用了 mask 的特性。...需要明确的是，使用 mask，不是将弹幕部分给遮挡住，而是利用 mask，指定弹幕容器之下，哪些部分正常展示，哪些部分透明隐藏。
右击这个正六边形，选择“设置形状格式”，线条设置为“无线条”;填充设置为“渐变填充”，类型、方向等选默认，角度为45度，2个渐变光圈，光圈1颜色为“白色，背景1，深色15%”，光圈2颜色为“白色，背景1...圆角矩形的内部填充为“渐变填充”，类型为“路径”，其中2个光圈：光圈1颜色为白色，位置为0%，透明度为100%;光圈2颜色为白色，位置为100%，透明度为90%。...插入一个大小合适的椭圆，设置为无线条，内部填充为“渐变填充”，类型为“路径”。其中2个光圈：光圈1颜色为白色，透明度为0%;光圈2颜色也为白色，透明度为100%。...选定剪除后的图形，设置其填充颜色为白色，透明度为80%，这样反光就制作完成了。 然后制作下方阴影及展台。插入一个大小合适的椭圆，设置为无线条，内部填充为“渐变填充”，类型为“路径”。...其中2个光圈：光圈1颜色为“灰色—25%，背景2，深色50%”，位置为0%，透明度为0%;光圈2颜色为“白色”，位置为100%，透明度为100%。柔化边缘，大小为5磅，这样下方的阴影就绘制完成了。
利用 background-image 实现一个渐变背景，再通过叠加一个白色背景使之形成一个渐变边框。...CodePen Demo -- bg + overflow 实现渐变边框 缺点 这个方案有两个问题，第一个是多使用了两个元素(当然在这里是 ::before 和 ::after)，其次最致命的是，如果要求边框內的背景是透明的...CodePen Demo -- background-clip 实现渐变边框 缺点 与第一种方法类似，如果要求边框內的背景是透明的，此方案便行不通了。...那么，我们只需要给它加一个父容器，父容器设置 overflow: hidden + border-radius 即可： ...: 10px 的容器，将这个元素之外的所有东西裁剪掉（即不可见）。
2016-08-22 07:33:22 今天遇到了一个问题，要在一个页面中设置一个半透明的白色div。...a代表透明度。比如rgba（255，255，255，0.1）就是透明度为0.1的白色。在现代浏览器中是支持rgba的。...这句话的意思本来是用来做渐变的。但是这个地方不需要渐变。所以两个颜色都设置成了相同的颜色。 大家注意，这个颜色“#19ffffff”是由两部分组成的。 第一部是#号后面的19 。...是rgba透明度0.1的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如下： ? 第二部分是19后面的六位。这个是六进制的颜色值。要跟rgb函数中的取值相同。...比如rgb(255,255,255)对应#ffffff；都是白色。
2、使用粉红色的渐变填充天空所在的路径，再用半透明的白色渐变填充天空中的云朵。道路的路径使用黄色、蓝色、蓝紫色的渐变填充。 ?...3、首先，我们用深蓝色的渐变填充中间高楼的墙壁路径，再用青色到透明的渐变填充高光区域，使用半透明的青色填充大楼右侧的高区域来加强这种左暗右亮的效果。 ? ?...4、大楼的下方墙壁使用淡青色的渐变来填充竖条纹进行修饰，再做出一个滤色模式的大光圈效果，光圈的透明度为70%左右。 ? ?...5、道路上方的小楼使用深蓝色渐变与淡青色渐变分别填充楼体与窗户，给河面上的建筑做出暗光效果，我们使用正片叠底的深蓝色填充在暗光路径上，设置透明度为45%左右，河面上的影子与建筑本身是对称的关系。 ?...6、我们使用纯蓝色的渐变与蓝紫色的渐变分别填充左侧尖顶大楼的上方尖顶结构与圆球结构，再用青色与紫色的渐变填充圆球上面的窗户，用深蓝色的渐变填充圆球的主体，使用纯蓝色到透明的渐变填充圆形覆盖圆球。 ?
如果用CSS，那么就从黑色矩形开始，然后在两侧加上上两个与白色背景颜色匹配的边框半径元素。 先画出一个黑色矩形，然后两边用圆弧遮挡。有了基础形状后，下一步就是给它添上渐变的背景。...1、边界半径（border-radius） 边界半径是为了让矩形的边角过渡得更自然，对于大多数网页开发者来说，只需一个参数border-radius，可以设定不同的半径数值。...框阴影将粘附到html容器的边缘，也会沿着边界半径定义的边缘。...，径向梯度用于定义圆和椭圆形的渐变效果。...拉夫领变得透明而有光泽，领口的蕾丝干脆断掉了，仿佛是逃难时期的肖像画。
最近，刚好有朋友问到，其对官网的一段文字特效特别感兴趣，看适用简单却不知从何下手，我们来看看： 整个动画大致是，随着页面的向下滚动，整个文字从无到出现，再经历一轮渐变色的变化，最后再逐渐消失。...因此，对于上述效果，我们只需要实现一个从透明到渐变色到透明的渐变背景即可，随着鼠标的滚动移动背景的 background-position 即可！...，实现一个从透明到渐变色到透明的渐变背景，配合了 background-clip: text。... .text { color: #fff; background: #000; } 再另外实现这样一个渐变背景，从黑色到渐变色（#ffb6ff 到 #b344ff）到黑色的渐变色...@scroll-timeline 能够设定一个动画的开始和结束由滚动容器内的滚动进度决定，而不是由时间决定。 意思是，我们可以定义一个动画效果，该动画的开始和结束可以通过容器的滚动来进行控制。 但是！
今天，我们就来画一画梦幻飞鱼的漫画，从中学习一下飞鱼的画法，重点掌握用渐变色填充鱼的身体，体会使用半透明的色彩来呈现鱼身的明暗效果，学会用各种元素来烘托这种梦境的氛围，下面我们就来看看详细的教程。...1、使用钢笔绘制出飞鱼的基本轮廓，再画出它的眼睛与尾巴，绘制大小不同的飞鱼路径，再绘制出天空与云朵、女孩的动作路径，最后画出彩虹的路径并复制到不同位置。 ?...4、接着，我们用黑色的线条描边云朵，再用白色填充云朵，下方的云朵使用浅蓝色、浅粉色填充。彩虹使用红色、橙色、黄色、绿色、青色、蓝色的渐变填充。 ? ?...5、这一步，我们用红黄蓝色的渐变填充大鱼的路径，再用品红色的渐变填充鱼嘴巴，使用半透明的红蓝色渐变填充鱼身下方的暗光路径，再用半透明的蓝色填充鱼的尾巴路径。 ? ?...6、这一步，我们分别用红蓝色、绿红色、蓝色的渐变填充其它不同形状的小鱼的身体。右上角的大鱼使用红色的渐变填充，在身体的下方使用半透明的红绿色的渐变填充暗光路径。 ? ? ?
我们一般写一个半透明的 div ，只需要给这个 div 设置如下的属性即可： background: rgba(255,255,255,0.5); 但是如果遇上 IE8 就有点蛋疼了。...a 代表透明度。 比如 rgba(255，255，255，0.5) 就是透明度为 0.5 的白色。 如果做到兼容 IE8 ，要用到 IE 的 filter 。...其本来是用来做渐变的，但是这个地方不需要渐变，所以两个参数设置成了相同的颜色。 注意：这个颜色“#7FFFFFFF”由两部分组成。...第一部是 # 号后面的 7F , 是 rgba 透明度 0.5的 IE filter 值。 从0.1到0.9每个数字对应一个 IE filter 值。...比如 rgb(255,255,255) 对应 #FFFFFF ；都是白色。 现在 半透明的 div 就可以兼容IE8了。
在设计前端页面时，常常会遇到这种情况：可滚动容器的边界并非父容器的边界，导致子元素溢出造成裁切，让页面产生比较怪异的视觉效果（左图） 添加遮罩之后，效果自然了许多（右图） 纯色遮罩 以上图的这种情况举例...，我们需要做的，是在可滚动容器的顶部和底部分别放置一个线性渐变的纯色遮罩，遮挡生硬的裁切线。...蒙版覆盖在可滚动容器之上，需要使用 pointer-events: none; 避免影响滚动操作。 仅适用于父容器为纯色的场景，在父容器有透明度、有背景图案或渐变时，遮罩会露馅。...我们只需要生成一个线性渐变，将其作为可滚动容器的蒙版即可。 使用linear-gradient创建一个多段的线性渐变，得到图中的蒙版效果。...gradient); } .top-mask { --show-top-mask: 1; } .bottom-mask { --show-bottom-mask: 1; } 因为我们将容器两侧的遮罩合并到了一个线性渐变中
)时会透出背景色，达不到半透明边框的效果。...（或上边界）和容器的左边界（或上边界）重合；当值为50%时，实际偏移值为容器减图片剩余空间的一半，图片左右边界（或上下边界）距离容器左右边界（或上下边界）相等，此时图片的中点和容器的中点重合。...当值100%时，实际偏移值为容器减图片的剩余空间，所以此时图片的右边界（或下边界）和容器的右边界（或下边界）重合。二者之差为负值时同样有效。地址 ?...折角 到这里 background 属性基本讲完了，光看无用，多动手实践吧。...切角 饼图 关键实现：锥形渐变 具体分析：利用锥形渐变可以轻松实现多个扇区，所以 svg 的方法权当学习了一波 svg 用法吧。
表面一层黑色文字 中间一层白色文字 最低的一层是斑马条纹文字 要实现多层文字，我首先想到的是文字投影 text-shadow ，但通常 text-shadow 只能投个纯色出来。...于是思路要改一下，黑色和白色层是投影，斑马条纹是真正的文字本身。 image.png 斑马纹思路 看到这种条纹效果，我想到了背景图渐变。...渐变纹路的想法确定后，就可以使用 background-clip: text 规定背景图案渲染到文本中。 这个方法经常用来做文字特效。...要将背景渲染到文本中还需要把文字原本的颜色设置成透明，这样才能把背景图案显示出来。...: 100px; /* 文字大点，效果更明显 */ font-weight: bold; /* 文字粗点，这样效果更明显 */ color: transparent; /* 设置文字填充颜色为透明
加入 .card 选择器，设定宽度是 320px，背景颜色设定为白色，这样背景的浅灰色就能够衬托出这个白色。...然后设定图片容器的样式，加入 .image 选择器，设定高度为 200px。然后里面的图片，加入 .image img 选择器，设定 display 为 block，宽度是 100%。...高度就继承自父容器，设定为 inherit，为了保持图片的比例，将 object-fit 设定为 cover。...加入 background，设定为 linear-gradient()，角度倾斜一点，设定为 100deg；然后由全透明的白色，位置在 40%；渐变为半透明的白色，位置在 50%；再到全透明的白色，位置在...我们来看看这个案例的完成效果 这里介绍了用 CSS 编写骨架屏效果的方法，大家在实际应用中，只需要在数据载入的时候，为容器加上 loading 这个 class；而在数据载入完成后，将数据显示到指定位置
当然，我们也可以在最上层直接再叠一层纯白色渐变： .grid { // ......background: // 最上层叠加一层白色渐变 linear-gradient(#fff, #fff), // 下面两个重复线性渐变实现网格...，实现一条 1px 的斜线，注意这里的渐变是从透明到黑色到透明，实现了一条 45° 的斜线。...我们再反 45° 过来，利用多重线性渐变，实现透明到白色的渐变效果： div { position: relative; margin: auto; width: 100px;...我把上面渐变 1的透明色改成黑色，就很好理解了： 想象一下，上图的黑色部分，如果是透明的，就能透出原本的那条斜线没有被白色遮挡住的地方。
如果用CSS，那么就从黑色矩形开始，然后在两侧加上上两个 与白色背景颜色匹配的边框半径元素。 ? 先画出一个黑色矩形，然后两边用圆弧遮挡。有了基础形状后，下一步就是给它添上渐变的背景。...1、边界半径（border-radius） 边界半径是为了让矩形的边角过渡得更自然，对于大多数网页开发者来说，只需一个参数border-radius，可以设定不同的半径数值。...框阴影将粘附到html容器的边缘，也会沿着边界半径定义的边缘。...Windows 7上从IE 6到IE 11，显示出来的都是这个鬼样子： ? 浓重的线条，甚至有点抽象艺术的感觉。 同样是早期IE，放到Mac上也一样鬼畜，这是IE 5.1.7的效果： ?...拉夫领变得透明而有光泽，领口的蕾丝干脆断掉了，仿佛是逃难时期的肖像画。
变亮，变亮模式与变暗模式产生的效果相反： 用黑色合成图像时无作用，用白色时则仍为白色 黑色比任何颜色都要暗，所以黑色会被任何色替换掉。反之，如果素材的底色是黑色，主色是白色。...那就应该用变暗（darken）的混合模式 CodePen Demo -- 纯色图片赋色技术尝试 局限性尝试 -- 使用透明底色图片 上述方法要求了图片本身内容为纯色黑色，底色为白色。...那么如果像 PNG 图片一样，只存在主色，而底色是透明的，是否能够同样实现效果呢？ 假设我们有一张这样的 PNG 图片（灰色主色，透明底色）： ? 按照上面的方式实现一遍，结果如下： ?...任意颜色赋色技术尝试 -- PNG图片 很遗憾，当底色是透明的时候，会被混合模式混合上叠加层的颜色，无法使用。...（当然，渐变色可以生成纯色）。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
