标签: linear-gradients
使用JavaScript编辑CSS渐变
我正在通过Firefox中的JavaScript编辑CSS渐变.我有输入框,用户可以放置1.方向2.第一种颜色3.第二种颜色
这是html
<html>
<head>
<title>Linear Gradient Control</title>
<script>
function renderButton(){
var orientation = document.getElementById("firstValue").value;
var colorOne = document.getElementById("firstColor").value;
var colorTwo = document.getElementById("secondColor").value;
//alert(orientation);
//alert(colorOne);
//alert(colorTwo);
};
</script>
<style>
#mainHolder
{
width:500px;
background: -moz-linear-gradient(left, green, red);
}
</style>
</head>
<body>
<h1>Gradient Editor</h1>
<form>
<input type="text" id="firstValue">orientation</input><br />
<input type="text" id="firstColor">first color</input><br />
<input type="text" id="secondColor">second color</input><br />
</form>
<button type="button" onclick="renderButton()">Render</button>
<div id="mainHolder">Content</div>
</body>
</html>
因此,回顾一下,用户将指定它们的3个值,这些值将传递给函数'renderButton();'.我可以使用哪一行来更改CSS3渐变的3个值,以便用户可以创建自己的自定义渐变框？我假设我只需要一两行.
PS我意识到这个例子只适用于Firefox.我只想在使用不同的浏览器之前先了解这个概念.
推荐指数
解决办法
查看次数
模糊的线性渐变停止在铬
如果我使用具有多个停止的线性渐变,如下所示:
div
{
border: 1px solid black;
width: 100px;
height: 2000px;
display: inline-block;
background-image: linear-gradient(to bottom, #383937 0, #001500 35px,
#ffffff 35px, #b0b0b0 150px, #ffffff 150px, #ffffff 100%);
}
Firefox没有 问题.
Chrome 渐变颜色之间的过渡模糊.我正在重新使用一个位置来定义一种新颜色,所以在位置35,颜色立即从(#001500)变为#ffffff(或者至少应该).如果div更高,则渐变停止之间的模糊度会增加.
IE 有一些像铬一样的模糊,但不那么极端.就像在Chrome中一样,如果div更高,模糊性会增加.
http://jsfiddle.net/cyq7grdr/5/
firefox中的渐变:
铬的渐变:
当div不高时(1000px而不是2000px),chrome中的渐变:
编辑
看起来这是固定在chrome中,但在firefox中引入.如果有人能证实这一点,我会很高兴.
推荐指数
解决办法
查看次数
现代浏览器中的图案渐变
关于渲染严重的渐变(CSS,Canvas 和 SVG),我得到越来越多的抱怨.
因为它高度依赖于浏览器和操作系统.我无法提出全球MCVE.所以我将专注于这个简单的CSS渐变,它在Chrome/Ubuntu(垂直条纹)上呈现得很糟糕:
body {
background: linear-gradient(90deg, #111, #444);
}当然,我对这个具体案例的解决方案感兴趣.但我更重视一般解决方案,以获得平滑单调的渐变.基于画布或图像的解决方案是不可接受的,因为我的渐变是大量的,动态的,并且通常是部分透明的.
推荐指数
解决办法
查看次数
在bg重叠时将文本颜色变为黑色
我有一个div与背景颜色渐变绝对定位.我有这个文本,当我向上滚动文本时,我想要更改为白色.
我正在使用'mix-blend-mode'属性来实现此目的,但我找不到任何将文本从黑色变为白色的设置.有没有人以前做过这个或者能想到我能做的伎俩？
.bg-container {
position: fixed;
top: -30px;
left: 0;
width: 100px;
height: 100px;
}
.gradient-background {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 200px;
background-image: linear-gradient(to bottom, rgb(100, 182, 240) 15%, rgb(81, 155, 244));
transform: skewY(-15deg);
}
.scroll-content {
position: absolute;
top: 50px;
}
.scroll-content p {
color: #000;
mix-blend-mode: overlay;
}
/*hack for iOS*/
.scroll-content p:after{
content: '\200c'
}<div class="bg-container">
<div class="gradient-background">
</div>
</div>
<div class="scroll-content">
<p> abc 1 </p>
<p> abc 2 </p> …推荐指数
解决办法
查看次数
谷歌Chrome背景渐变
真的业余问题在这里 - 身体背景渐变不起作用铬,非常奇怪,我试过:
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFF), to(#000));
和
background: -webkit-gradient(linear, 0%, 0%, 0%, 100%, from(#fff), to(#000));
和
background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#000));
一切都无济于事!适用于所有其他浏览器......
推荐指数
解决办法
查看次数
使用像素测量时,渐变结束是模糊的
我正在使用background-image: linear-gradientcss属性为站点背景创建多个颜色条.
通常渐变停止是由百分比定义的,但我需要在我的网站中使用像素,所以我设法使用lea Verou在她的模式中使用的方法将其更改为像素
.问题是每种颜色的结尾有点模糊.在Firefox中它不那么引人注目,但在Chrome中它非常引人注目.
有办法处理吗？
我注意到当我将'deg'从180改为45时,两端看起来很棒.但不幸的是我需要条纹是水平的:)
我的代码:http://cssdesk.com/c6mGM
推荐指数
解决办法
查看次数
CSS - 图像两侧的线性渐变透明度
TL;博士
有没有办法在图像的-webkit-linear-gradient左侧和右侧为CSS中的图像添加透明度？
长版
我有一个图像,我想添加透明度 - 纯CSS - 避免使用像Photoshop,Gimp等任何图像编辑器.我试图使用-webkit-linear-gradient但它使用rgba()函数来定义色块.
所以这个片段
height: 200px;
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1));
做这个:
在此示例中,rgba()中的最后一个参数定义颜色的透明度.到现在为止还挺好.如果我把right在-webkit-linear-gradient图像上方会显示相反.(你不说？!)
我想以某种方式将两者合并,并创建一个两边透明的渐变.只有不用渐变.带图像.
我也尝试过box-shadow,radial-gradient但我无法弄明白.
有没有办法只使用CSS在图像的左侧和右侧添加透明度？
编辑:
例:
推荐指数
解决办法
查看次数
在线性渐变上使用背景位置的百分比值
有没有办法background-position取出百分比值？目前我的按钮仅适用于一个明确的价值观width和background-position.
body {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
color: white;
font-weight: bold;
width: 350px;
height: 50px;
border: 1px solid green;
transition: background 0.5s;
background-repeat: no-repeat;
background-image: linear-gradient(to left, #2484c6, #1995c8 51%, #00bbce), linear-gradient(to right, #2484c6 0%, #1995c8 51%, #00bbce 76%);
}
.button-pixel {
background-position: -350px 0px, 0px 0px;
}
.button-pixel:hover {
background-position: 0px 0px, 350px 0px;
}
.button-percentage …推荐指数
解决办法
查看次数
是否可以线性渐变填充SVG中的分组路径(通过jss事件上的css或attr)
如何<g>在SVG图像中填充一个渐变而不是填充<g>所选的所有s <g>？
在这种情况下,我想展示非洲,只填充从黄色到红色的一个渐变,但由于子组填充产生许多渐变.
javascript:
<script type="text/javascript">
function svgOver() {
var what = $(this).attr("id");
$("#world #"+what, svg.root()).attr("fill", "url(#red_black)");
}
function svgOut() {
$(this).attr("fill", "");
}
...
$("#map").svg({
loadURL: 'http://teszt.privilegetours.hu/skins/privilege/svg/worldmap.svg',
onLoad: function(svg) {
$("#world > g", svg.root()).bind('mouseover', svgOver).bind('mouseout', svgOut).bind('click', svgZoom);
},
settings: {}
});
SVG:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" mlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="570px" height="300px" viewBox="146.605 71.42 570 300" enable-background="new 146.605 71.42 570 300" xml:space="preserve">
<defs>
<linearGradient id="red_black" …推荐指数
解决办法
查看次数
SVG线性渐变在Safari中不起作用
我有一个SVG对象,其中包含直接嵌入文档中的线性渐变.它在Chrome和Firefox中运行良好,但在Safari中无法呈现.如果我将SVG创建为文件并使用Object标签嵌入它,它在Safari中可以正常工作.其他形状和填充工作,它只是线性渐变不起作用.我想我可以使用该对象,但我更喜欢直接嵌入SVG.
我在这里创建了一个演示(在Chrome中运行,而不是Safari):http://jsfiddle.net/sjKbN/
我发现这个答案建议将内容类型设置为application/xhtml+xml,但这本身似乎会导致其他问题.
只是想知道是否有人遇到任何其他修复或想法让这个工作.
推荐指数
解决办法
查看次数
标签 统计
linear-gradients ×10
css ×7
css3 ×6
javascript ×2
svg ×2
background ×1
browser ×1
firefox ×1
gradientstop ×1
html ×1
html5 ×1
image ×1
jquery ×1
safari ×1
transparency ×1