background-image:linear-gradient(方向,起始颜色,终止颜色);background-image:linear-gradient(toright,yellow,green); 参数解释: 方向可以是:to left、to right、to top、to bottom、角度30deg(指的是顺时针方向30°)。 格式举例: <!DOCTYPE html>div{width:500px;height:100px;margin:10pxauto;border:1pxsoli...
background-image功能比较单一,无法设置透明度,如果直接用opacity强行设置,会导致整个盒子都变得透明。 解决办法: 1.利用线性渐变函数linear-gradient(),在里面可以设置填充图片,把颜色设置成空透明度图层,再针对图片设置透明度,即可实现透明的背景图层。 2.利用伪元素贴上一张宽高等于盒子的图片,因为是图片所以可以设置透...
background-image: -moz-linear-gradient(top, #fff, #e7e7e7);/*Firefox*/background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #e7e7e7));/*Saf4+, Chrome*/filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorst...
渐变背景:background-image: linear-gradient(transparent,rgba(0, 0, 0, .6)); // 从transparent白色到0.6透明度的黑色。默认情况下背景遮罩不显示(opacity:0),hover的时候定位到盒子上(opacity:1) 文字位移:transform:translate(0,80px) // 水平位置保持不变,垂直方向隐藏”查看更多“这几个字。当鼠标hover的...
background-image 属性用于设置元素的背景图像,而 radial-gradient 是一种 CSS 渐变类型,可用于创建径向渐变背景。这种径向渐变背景通常以一个中心点为基础,然后颜色渐变向外扩展,形成一种放射状的效果。 radial-gradient 的语法如下: background-image: radial-gradient([shape] [size] at [position], color-stop1...
我们习惯把0.3 的 0省略掉这样写 background: rgba(0, 0, 0, .3); 注意:背景半透明是指盒子背景半透明,盒子里面的内容不受影响 低于IE 9的版本不支持 盒子半透明 opacity 设置opacity元素的所有后代元素会随着一起具有透明性,一般用于调整图片或者模块的整体不透明度 ...
background-image: repeating-radial-gradient(blue 20%,green 50%); 在线展示地址 linear-gradient()线性渐变 CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于gradient数据类型,是一种特别的image数据类型。 在线展示地址 ...
在button-text的伪类元素上面,添加background-image,并用径向渐变radial-gradient画出多个圆作为粒子。 transform: scale(0.9),是鼠标点击时,缩放button-text元素。 大家应该都看到默认伪类元素是display: none;隐藏的。所有当我们点击时,需要添加一个选择器,让其显示出来,并执行动画。
,left:"-1000%",content:"''",opacity:0.75,position:"absolute",backgroundImage:"conic-gradient(...
background-image: linear-gradient(to right,gold 50%, pink 50%, pink);背景的多个属性配合 渐变...