标签: gradient

如何在 Android Jetpack Compose 中的图像上应用半透明渐变?

在Android Jetpack Compose中,有谁知道如何使图像的左侧慢慢淡入右侧透明?谢谢!

编辑:抱歉,我的意思是在 Compose 中使图像像这样褪色,可能使用混合模式?但不知道该怎么做..

预期结果:

图像淡入透明样本

android gradient image kotlin android-jetpack-compose

2
推荐指数
1
解决办法
3415
查看次数

如何在 Jetpack compose 中创建角度渐变?

在此输入图像描述

我想在 Android Jetpack Compose 中创建这样的角度渐变。

在此输入图像描述

渐变是在 Figma 中制作的,下面是 Figma Inspect 中的 android 代码。

在此输入图像描述

我只能找到只有一个角度的线性渐变的资源。

如何在 Jetpack compose 中创建这个角度渐变?

android gradient android-jetpack-compose figma

2
推荐指数
1
解决办法
1086
查看次数

尝试使渐变透明以将图像放置在其后面

我能够将图像放在它后面并能够看到它。

渐变是否能够以不同的方式编写,而透明可以工作?

我该如何或如何将背景设置为透明,并使其能够在代码中工作?

使用遮罩图像或剪辑路径可以在这里工作以使其透明吗?

或者也许有不同的方式?

我应该做什么或更改我的代码才能将黑色设置为透明并使其正常工作?

现在渐变图像看起来像这样:

在此输入图像描述

--color-b: black;设置为透明时,我应该看到这个图像:

https://i.imgur.com/8sQi6Tu.png

我想要实现的目标的示例:

SVG 版本: https: //jsfiddle.net/h8q352mg/

在此输入图像描述

为什么这这么难做到?

什么会起作用?

如何将此处的黑色更改为透明?

这就是我在代码中尝试做的所有事情,使黑色透明。

我不断尝试不同的东西,颜色不断相互融合。

这里有人知道如何做到这一点,这样颜色就不会相互融合吗?

由于主体颜色是绿色,因此当黑色设置为透明时,我应该看到代替黑色的颜色。

https://jsfiddle.net/e39mub8L/

:root {
--color-a: #1155cc;
--color-b: black;
--color-c: #1155cc;
--color-d: black;
}
Run Code Online (Sandbox Code Playgroud)

:root {
--color-a: #1155cc;
--color-b: black;
--color-c: #1155cc;
--color-d: black;
}
Run Code Online (Sandbox Code Playgroud)
:root {
  --color-a: #1155cc;
  --color-b: black;
  --color-c: #1155cc;
  --color-d: black;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: green;
  padding: 50px 8px;
}

.panel-left,
.panel-right {
  position: fixed;
  height: 100%; …
Run Code Online (Sandbox Code Playgroud)

css gradient transparent background-image linear-gradients

2
推荐指数
1
解决办法
610
查看次数

如何给三角形添加渐变?

我怎样才能将渐变颜色应用于三角形?

https://jsfiddle.net/otz9ewm8/

.spinner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 27px solid #B76BF0;
  transform: translateX(4px);
  z-index: 0;
}

Run Code Online (Sandbox Code Playgroud)

在代码中这将如何完成?

.spinner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 27px solid #B76BF0;
  transform: translateX(4px);
  z-index: 0;
}

Run Code Online (Sandbox Code Playgroud)
.spinner {
  -webkit-appearance: …
Run Code Online (Sandbox Code Playgroud)

css gradient linear-gradients

2
推荐指数
1
解决办法
78
查看次数

CSS3渐变背景底部有不需要的空白区域

当我应用CSS3渐变并且内容的高度不足以滚动条时,我在移除底部的空白区域时遇到了很大的困难.

比如这里:http: //womancareolympia.webs.com/

我试过将html和身高都设置为100%或自动.我可以通过这种方式使渐变到底部,但是当内容需要滚动条时,内容会流过渐变.

谢谢您的帮助!

css whitespace gradient css3

1
推荐指数
1
解决办法
4258
查看次数

java:如何将透明渐变背景添加到JFrame

java:我想使用Gradient样式透明背景到JFrame.在顶部,透明度应该是100%,但是当它下降时它应该继续减少而在底部它应该是20%

我知道我可以使用已经具有这种效果的图像但我想提供主题设施并允许用户使用他们喜欢的图像但允许在运行时透明.

java swing gradient jframe

1
推荐指数
1
解决办法
6638
查看次数

使用css渐变创建"闪亮"效果

是否有可能仅使用css在下面的链接中创建一个像iphone上闪亮效果的渐变?
http://prntscr.com/22oa4f

我试过使用下面的代码,但它不是"闪亮的"

background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, .15)), to(rgba(0, 0, 0, .25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, .1)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
background-image: linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, …
Run Code Online (Sandbox Code Playgroud)

css gradient

1
推荐指数
2
解决办法
1万
查看次数

如何在条形图上添加渐变填充?

我有数据框(df),列:( asdfg字符)和NUMERIC(数字).

运用

ggplot(df, aes(x = asdfg, y = NUMERIC)) + geom_bar(stat = "identity", fill= "red")
Run Code Online (Sandbox Code Playgroud)

我做了类似的事情:

在此输入图像描述

现在我想得到如下条形图:

在此输入图像描述

我不知道该怎么做.我尝试过使用scale_colour_gradient2但它不起作用(可能我做错了).

gradient r fill bar-chart ggplot2

1
推荐指数
1
解决办法
3759
查看次数

CSS Crazy Gradient

有一个客户要求背景的奇怪请求看起来像这样:

在此输入图像描述

但是使用一种颜色的不同色调代替.除了性能问题之外,有没有办法用CSS做到这一点?据我所知,CSS只适用于线性和径向渐变,因为这并不属于任何一个类别,我不确定还能做些什么.

理想情况下,我希望避免使用图像,主要是出于性能原因

如果有人有任何想法,很想听听他们!

css gradient

1
推荐指数
1
解决办法
532
查看次数

HTML CSS Gradient - 我已经尝试了一切

在任何事情之前,感谢对我的报酬.

我只是想做个大人物.

所以在HTML中我创建了一个简单的div.

码:

body {
}

.containerallbody {
  width: 800px;
  height:  300px;
  background-color: #0076b4;
  background-image: -moz-linear-gradient (top, #0076b4 0%, white 100%);
  background-image: -webkit-linear-gradient (top, #0076b4 0%, white 100%);
  background-image: linear-gradient (top, #0076b4 0%, white 100%); /*STANDARD*/
}
Run Code Online (Sandbox Code Playgroud)
<body>
  <div class="containerallbody">

  </div>
</body>
Run Code Online (Sandbox Code Playgroud)

我尝试过Safari,Chrome,Firefox和IE.我也尝试了w3scholls上显示的所有内容.我在youtube上看过很多关于这个的视频,我不知道该怎么做.我只想要一个简单的背景覆盖所有的身体,从蓝色到白色的线性广泛.

有人可以救我吗?

html css gradient

1
推荐指数
1
解决办法
53
查看次数