标签: css-gradients
平滑的CSS渐变
我正在学习如何使用CSS渐变.
我的问题是从上到下的渐变.您可以在颜色变化中看到 "停止".
这是我的CSS代码
#header {
width:1000px;
height:250px;
background:-moz-linear-gradient(top, #BF7A30 30%, #EDD599);
background:-webkit-linear-gradient(top, #BF7A30 30%, #EDD599);
}
有没有办法平滑从上到下渐变的停止？(对我而言,从左到右或从右到左渐变不是很明显)
推荐指数
解决办法
查看次数
浏览器移动的线性渐变和网址图片？
我想有一个图像作为背景和CSS线性渐变:
background-image: url("/site/grigliatrasparente.png"), linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);
我不会遇到桌面浏览器(Firefox 44.x; IE 10; Chrome; Safari)的问题,但不适用于移动浏览器(我使用我的iphone 5测试,(9.x)使用safari,app firefox,app铬).
我用这个:
background-image: url("/site/grigliatrasparente.png"), -moz-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);
background-image: url("/site/grigliatrasparente.png"), -webkit-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);
background-image: url("/site/grigliatrasparente.png"), -o-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);
background-image: url("/site/grigliatrasparente.png"), -ms-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);
background-image: url("/site/grigliatrasparente.png"), -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,#404040), color-stop(2%,#dfbb80),color-stop(98%,#dfbb80),color-stop(100%,#404040));
background-image: url("/site/grigliatrasparente.png"), linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#404040, endColorstr=#dfbb80);
background-color: #dfbb80;
有什么问题？
非常感谢,抱歉我的英语:)
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
是否可以在 :root <html> 元素上制作背景渐变，使其超出过度滚动？
我试图做到这一点，以便当您滚动经过页面的顶部和底部时，我在正文上使用的背景渐变显示在正文的边缘之外。
是否有可能做到这一点？
我尝试过在根元素上设置background-image和background样式属性<html>，但似乎都没有超出正文传统结束位置的边缘。
请注意，这是在<html>标签上，而不是<body>标签上，而且由于过度滚动的工作方式，jsfiddle 似乎无法正确重现该问题。
这是一个复制示例（将其复制到index.html文件中进行测试）。我也用 试过了background-image，效果是一样的。
<html style="background: linear-gradient(180deg, rgba(214,124,123,1) 0%, rgba(214,188,123,1) 100%);">
</html>
下面是它的 .gif：
这是一个 .gif，其中已在 上设置了静态颜色<html>，并在 上设置了渐变<body>：
就像这样：
<html style="background-color: red">
<body style="margin: 0; background: linear-gradient(180deg, rgba(214,124,123,1) 0%, rgba(214,188,123,1) 100%);">
</body>
</html>
我提供了垂直渐变的示例，以匹配关闭期间请求的示例，但我主要感兴趣的是在页面上方和下方扩展水平渐变。
推荐指数
解决办法
查看次数
每次用户刷新时,如何将不同的渐变设置为背景？
我正在开发基于引导程序的网页,在我的CSS文件中,我有以下代码:
body {
height: 100%;
background: #3a7bd5; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #3a7bd5 , #3a6073); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #3a7bd5 , #3a6073); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
它将渐变作为背景应用于我的页面,但是我还有另外两个渐变:
background: #114357; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #114357 , #F29492); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #114357 , #F29492); /* W3C, IE 10+/ Edge, Firefox 16+, …推荐指数
解决办法
查看次数
CSS边框图像渐变在Safari 10中不起作用
我遇到了Safari 10和CSS边框图像渐变的问题.它适用于所有其他浏览器,甚至可以在Safari 9中使用.它甚至可以在Safari 10中显示在线模拟器中.请看下面的图片:
(我猜这是IE 11,而不是IE 10.感谢您的纠正!)
我以为它只是我的CSS所以我真的很简单,并且做了一个小提琴.你可以在https://jsfiddle.net/tgbuxkee/看到它
它也在下面生成.
div {
width: 200px;
height: 200px;
border: 6px solid transparent;
-moz-border-image: -moz-linear-gradient(top, #f0e2d0 0%, #c08b62 100%);
-webkit-border-image: -webkit-linear-gradient(top, #f0e2d0 0%, #c08b62 100%);
border-image: linear-gradient(to bottom, #f0e2d0 0%, #c08b62 100%);
-webkit-border-image-slice: 2;
border-image-slice: 2;
}<div>
</div>有没有人知道为什么会这样？我知道在Safari中有一些图像边框的错误,但我不认为这是这种情况(也许是这样).
指导很有帮助.
谢谢.
推荐指数
解决办法
查看次数
背景像素化
我正在寻找这样的背景效果(在纯CSS中),我该怎么做？
(缩放图像)
码:
html,
body {
height:100%;
background-color:#3D3D3D;
display:flex;
}
div {
height: 100px;
width:100px;
margin:10px auto;
background-image: linear-gradient(45deg, #868686 25%, transparent 25%, transparent 75%, #868686 75%, #868686), linear-gradient(45deg, #868686 25%, transparent 25%, transparent 75%, #868686 75%, #868686);
background-position: 0 0, 51px 51px;
background-color: #222222;
background-size: 2px 2px;
}<div></div>推荐指数
解决办法
查看次数
Is this possible to create 2-axis 4 color gradient in css (bilinear gradient)?
My exmaple in JavaScript and <canvas>. https://codepen.io/KonradLinkowski/pen/QWbjaPr
const canvas = document.querySelector('#box')
const ctx = canvas.getContext('2d')
const interpolate = (value, start, end) => (end - start) * value + start
const interpolateRGB = (value, start, end) => {
return {
r: interpolate(value, start.r, end.r),
g: interpolate(value, start.g, end.g),
b: interpolate(value, start.b, end.b)
}
}
const calcColor = (point, topLeft, topRight, bottomLeft, bottomRight) => {
const top = interpolateRGB(point.x, topLeft, topRight)
const bottom = interpolateRGB(point.x, bottomLeft, bottomRight)
const result = interpolateRGB(point.y, …css linear-gradients background-color css-gradients bilinear-interpolation
推荐指数
解决办法
查看次数
内联 <img> 标签上的 Linear-gradient()
我想linear-gradient在图像上创建这种效果：
我试过这个代码：http : //codepen.io/anon/pen/dNZoeJ
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
.bg-img {
width: 100%;
height: 100%;
background: url('http://unsplash.it/1200x800') center center no-repeat;
background-size: cover;
}
.bg-img:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right, #002f4b, #dc4225);
opacity: .6;
}<div class="bg-img"></div>但是我的图像是内联的而不是背景的，所以这是行不通的。
<% review.forEach(function(review) { %>
<div class="col-md-4 col-sm-6">
<div class="thumbnail">
<div class="img">
<a href="/review/<%= review._id %>"><img src="<%= review.image %>"></a>
</div>
</div>
<div class="caption">
<a …推荐指数
解决办法
查看次数
CSS背景图像淡出白色
我试图从白色淡化背景图像而不淡化内容.
这就是我所拥有的:
.my-container {
position: relative;
background: white;
overflow: hidden;
background-repeat: no-repeat;
width: 100%;
height: 100%;
background-size: cover;
background-image: url('http://placekitten.com/1500/1000');
}
/* You could use :after - it doesn't really matter */
.my-container:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 1;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-repeat: no-repeat;
background-position: 50% 0;
background-size: cover;
}<div class="my-container">
<h1>Scotch Scotch Scotch</h1>
<h1>Scotch Scotch Scotch</h1> …推荐指数
解决办法
查看次数
标签 统计
css ×10
css-gradients ×10
css3 ×5
html ×4
autoprefixer ×1
background ×1
border-image ×1
javascript ×1
overscroll ×1
safari ×1