标签: linear-gradients
如何在 WPF 中创建斜角渐变边框
我正在尝试创建一个带有斜角边框的圆形末端进度条。我的进度条看起来像我想要的，但我很难使边框看起来是斜角的。有人可以帮我解决这个问题吗？
我试图让它看起来像这样的图像就在这里！斜角边框
我当前的 Window XAML 代码如下：
<Window x:Class="SplashDemo2.ProgressBarWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ProgressBarWindow" Height="100" Width="500">
<Window.Resources>
<Style x:Key="ProgressBarStyle" TargetType="ProgressBar">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ProgressBar">
<Border BorderBrush="#1D4276" BorderThickness="5"
CornerRadius="15" Padding="0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,0.9" StartPoint="0.5,0">
<GradientStop Color="#FFEAEAEA" Offset="0.9"/>
<GradientStop Color="#FF646464"/>
</LinearGradientBrush>
</Border.Background>
<Grid x:Name="PART_Track" >
<Rectangle x:Name="PART_Indicator"
HorizontalAlignment="Left"
RadiusX="10" RadiusY="10">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,0.9" StartPoint="0.5,0">
<GradientStop Color="#FF226494" Offset="0.9"/>
<GradientStop Color="#FFEBEFFA"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<ProgressBar Value="50" Width="380" Height="25"
Style="{StaticResource ProgressBarStyle}"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Window>
谁能帮我让边框看起来像图片一样？非常感谢。
推荐指数
解决办法
查看次数
SVG 渐变作为具有绝对位置的折线描边背景
是否能够设置应用于折线的渐变背景的绝对位置？
例如当我设置渐变时：
<filter id="black-glow">
<feColorMatrix type="matrix" values=
"0 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0" />
<feGaussianBlur stdDeviation="3" result="coloredBlur" />
<feMerge>
<feMergeNode in="coloredBlur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
折线的笔画：
<polyline points="50,350 ... 350,239" style="fill:none;" stroke="url(#grad1)" stroke-width="3" stroke-linecap="round" />
（折线有最大/最小位置点）
结果没问题：
但是，当折线平坦时：
绿色的颜色要高得多。由于这是彩色图表，因此我需要实现不断查看背景，而与绘制折线的方式无关。
推荐指数
解决办法
查看次数
JavaScript body.style.background 无法在 script.js 中使用线性渐变，但在控制台中工作正常
body.style.background = 无法在 script.js 包含的文件中工作，其他一切都可以工作，兑现的 dom 选择器可以工作，输入 body.style.background = 'red'; 有效，但不在包含文件中
我已经尝试过console.logs，如下面的代码中所述，输出的奇特之处是，如果我从回调中复制日志并将其粘贴到body.style.background中，它可以工作，但不能在脚本文件中。
color_1 = document.querySelector("#color-1");
color_2 = document.querySelector("#color-2");
body = document.querySelector("body");
function changeBackgroundColor() {
body.style.background = "linear-gradient(to right, "+color_1.value+ ", "+ color_2.value+");";
//************* I am getting the console.logs but the background's not changing
console.log("linear-gradient(to right, " + color_1.value + ", " + color_2.value + ");");
}
//************* Both the listeners work fine and the cashed selectors
color_1.addEventListener("input", changeBackgroundColor);
color_2.addEventListener("input", changeBackgroundColor);<html>
<head>
<title>Background Color Generator</title>
<!-- Custom Styles -->
<style …推荐指数
解决办法
查看次数
如何在ggplot2中获得水平颜色渐变？
我想创建一个水平温度计图表，颜色渐变从绿色（左）到红色（右）。
我能够添加颜色渐变，但它是垂直的而不是水平的。
其次，是否可以在图表上方显示“我”文本？当它位于图表顶部时很难阅读
library(ggplot2)
library(grid)
g <- rasterGrob(c("lightgreen", "yellow", "orange", "red"),
width=unit(1,"npc"), height = unit(1,"npc"),
interpolate = TRUE)
myVariable1 <- 17
dataset <- data.frame(myVariable1)
maxVariable1 = max(myVariable1, 25)
ggplot(dataset, aes(myVariable1)) +
scale_x_continuous(expand = c(0, 0), limits = c(0, maxVariable1)) +
scale_y_continuous(expand = c(0, 0), limits = c(0, 10)) +
annotation_custom(g, xmin=-Inf, xmax=Inf, ymin=-Inf, ymax=Inf) +
theme(
axis.title.y=element_blank(),
axis.ticks.y=element_blank(),
axis.text.y=element_blank()
) +
geom_vline(aes(xintercept=myVariable1), color="red", size=1) +
annotate("text", x=myVariable1-1, y=10-0.4, label="Me", colour="red")
推荐指数
解决办法
查看次数
如何创建具有渐变边框和透明度的 CSS 加载器？
我正在尝试用 HTML 和 CSS 做一个加载器我已经完成了加载器但是当我在加载器中心后面有信息时会出现问题，但信息没有显示，原因是我有背景：白色；我需要避免显示渐变，因为如果我删除白色并放置透明渐变就会出现。
所以当我在装载机后面有东西时我需要解决这个问题
.loader {
display: flex;
justify-content: center;
position: fixed;
top: 50%;
left: 50%;
z-index: 10;
}
.loader .circle {
background-image:linear-gradient(90deg, #a03297, #e90b5a);
width: 80px;
height: 80px;
border-style: solid;
border-color: transparent;
border-radius: 50%;
border-width: 1px;
animation: rot 2s linear infinite;
padding: 10px;
box-sizing: content-box;
}
.circle > div {
background:white;
height: 100%;
width: 100%;
border-style: solid;
border-color:transparent;
border-radius: 50%;
border-width: 1px;
}
@keyframes rot {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg); }
} …推荐指数
解决办法
查看次数
CSS不透明度从上到下渐变没有颜色？
我想让我的 div 具有渐变不透明度。我能找到的是如何用颜色来设置它。但是如果我不想有任何颜色，这样里面的元素就会变得底部透明怎么办：
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(41,137,216,1)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
推荐指数
解决办法
查看次数
带有渐变色 CSS 的多条圆线
我想实现带有渐变背景颜色的多条圆形线的横幅设计。我对此进行了更多研究。我无法找到与我关注的问题相关的问题。
波纹管代码用于创建纯色背景横幅。
.blue-cross-banner{
background: #0FA2EB;
border-radius: 30px;
padding: 4em;
margin: 1em;
}
我无法上传横幅的 svg 格式。它显示圆形线条的渐变阴影颜色。我在这里找到了一些与我的问题相关的内容https://css-tricks.com/gradient-borders-in-css/。但这对我的担忧无济于事。
#grad2 {
background: linear-gradient(90deg, rgba(15, 162, 235, 0) 33.16%, #0FA2EB 85.35%);
border-radius: 30px;
}
上面的css需要使用圆线的背景渐变色。
推荐指数
解决办法
查看次数
尝试使渐变透明以将图像放置在其后面
我能够将图像放在它后面并能够看到它。
渐变是否能够以不同的方式编写，而透明可以工作？
我该如何或如何将背景设置为透明，并使其能够在代码中工作？
使用遮罩图像或剪辑路径可以在这里工作以使其透明吗？
或者也许有不同的方式？
我应该做什么或更改我的代码才能将黑色设置为透明并使其正常工作？
现在渐变图像看起来像这样：
当--color-b: black;设置为透明时，我应该看到这个图像：
我想要实现的目标的示例：
SVG 版本： https: //jsfiddle.net/h8q352mg/
为什么这这么难做到？
什么会起作用？
如何将此处的黑色更改为透明？
这就是我在代码中尝试做的所有事情，使黑色透明。
我不断尝试不同的东西，颜色不断相互融合。
这里有人知道如何做到这一点，这样颜色就不会相互融合吗？
由于主体颜色是绿色，因此当黑色设置为透明时，我应该看到代替黑色的颜色。
https://jsfiddle.net/e39mub8L/
:root {
--color-a: #1155cc;
--color-b: black;
--color-c: #1155cc;
--color-d: black;
}
:root {
--color-a: #1155cc;
--color-b: black;
--color-c: #1155cc;
--color-d: black;
}
: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%; …推荐指数
解决办法
查看次数
如何给三角形添加渐变？
我怎样才能将渐变颜色应用于三角形？
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;
}
在代码中这将如何完成？
.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;
}
.spinner {
-webkit-appearance: …推荐指数
解决办法
查看次数
Android:如何绘制二维渐变
我想用Android来绘制这样的渐变Canvas:
在水平方向上有两种颜色(红色和蓝色)的渐变.然后在垂直方向上有一个透明度梯度(允许红色和蓝色显示)为空(没有所有颜色？).
我在这里发现了这个链接,这与我想要的很接近.但我无法弄清楚如何使底部透明.
如何在Android中实现这一目标？
推荐指数
解决办法
查看次数
标签 统计
linear-gradients ×10
css ×5
gradient ×3
html ×2
android ×1
background ×1
colors ×1
dom ×1
ggplot2 ×1
javascript ×1
opacity ×1
polyline ×1
r ×1
svg ×1
transparent ×1
wpf ×1
xaml ×1