首页 > 其他分享 >css 渐变 透明

css 渐变 透明

时间:2024-02-28 20:22:56浏览次数:40  
标签:blue 透明 linear gradient 渐变 pink background css

透明也算一个颜色
百分比表示的是位置

 




线性渐变

background: linear-gradient(blue, pink);

background: linear-gradient(to right, blue, pink);

background: linear-gradient(70deg, blue, pink);
 background: linear-gradient(red, yellow, blue, orange);
background: linear-gradient(to left, lime 28px, red 77%, cyan);


径向渐变
background: radial-gradient(red, blue);


https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Images/Using_CSS_gradients

 

 

项目中写的

{ 'background-image': 'linear-gradient(to right, transparent 5%, rgba(245, 108, 108, 0.5) 20% 80%,transparent 95%)' }


图片叠加渐变
background: linear-gradient(rgba(12, 13, 20, 0.3), rgb(26, 27, 40)) , url('@/assets/test.png') ;
 

 

标签:blue,透明,linear,gradient,渐变,pink,background,css
From: https://www.cnblogs.com/dhjy123/p/18041686

相关文章

  • javaweb01-html&css
    HTML-CSS基础介绍html:超文本标记语言学习标签css:层叠样式表学习样式基础标签&样式-新浪新闻biao标题标题排版(标签介绍)标题标签h1、h2水平线标签hr图片标签img超链接a标题样式css引入方式:行内样式:内嵌样式:外联样式:<link颜色表示形式:关键字:redrbg表示法:#rgb(......
  • 解决uniapp项目中使用vant Weapp图标组件报错问题(Module build failed from ./node_mo
    解决uniapp项目中使用vantWeapp图标组件报错问题(Modulebuildfailedfrom./node_modules/postcss-loader/src/index):https://blog.csdn.net/it_cgq/article/details/111991644?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170909210216800225582870%2522%252C%252......
  • Rust的Deref特征:让智能指针“透明”的关键
    除了上篇文章中介绍过的Borrow和AsRef外,Rust中还有一个很常见的和引用相关的特征:Deref。不过,和Borrow、AsRef两个特征不同,Deref其实是用于重载解引用运算符(也就是*)的特征;在为某个类实现了Deref特征后,对它使用*运算就会调用特征中重载的方法。这篇文章不仅将介绍Deref特性,还将探......
  • css 设置版本号
      .el-row::before{content:"";width:0;height:0;border:60pxsolidtransparent;border-right:60pxsolid#e3e3e3;transform:rotate(135deg);position:absolute;right:-61px;top:-61px;cursor:pointer;}.el......
  • 面试题(一)—— CSS 盒模型
    一、什么是 CSS盒模型CSS盒模型是指在网页中,每个元素都被看作是一个矩形的盒子,这个盒子包含了元素的内容(content)、内边距(padding)、边框(border)和外边距(margin)。 二、标准盒模型与怪异盒模型1、box-sizing两个常用参数:content-box:默认值。标准盒模型border-box:怪异盒模......
  • 现代 CSS 解决方案:accent-color 强调色
    accent-color是从Chrome93开始被得到支持的一个不算太新属性。之前一直没有好好介绍一下这个属性。直到最近在给一些系统整体切换主题色的时候,更深入的了解了一下这个属性。简单而言,CSSaccent-color支持使用几行简单的CSS为表单元素着色,是的,只需几行代码就可以将主题颜色......
  • three.js使用 CSS2DRenderer
    导入 import{CSS2DRenderer,CSS2DObject}from'three/examples/jsm/renderers/CSS2DRenderer';functioncreateLableObj(text,vector){letlaberDiv=document.createElement('div');//创建div容器laberDiv.className='laber_name......
  • C# WPF 根据RGB三色得出透明度Opacity
    当我们把ARGB压缩为RGB数据时,会丢失A透明通道那么就有可能会遇到反推A透明通道的问题原理很简单,取RGB三色最大通道除255得到A通道Randomrandom=newRandom();bytered=Convert.ToByte(random.Next(0,0xff));bytegreen=Conver......
  • CSS 三大特性:继承、层叠性、优先级
    #CSS三大特性:继承、层叠性、优先级TIP我们实际的开发中,经常会遇到CSS应用时的冲突问题。比如本来应该产生效果的样式没有生效,或有时候不想要的效果硬实现了,为什么会产生这种效果,我们搞不清原因。接下来我们要学的CSS三大特性:继承性、层叠性、优先级就是为解决这些问题而......
  • CSScomb配置
    1.问题在配置使用CSScomb时,无论是使用官方提供的"yandex",会出现所有项均顶头显示链接yandex.json还是在网上找的一些配置,无法忽略一些无需配置的文件,且不能按我的需求:比如像width,height等必须在background-color的前面这些2.解决参考了一下yandex.json的代码,将二者一结......