linear-gradients

问题 I have no idea how to set the background gradient on a button (without making the background gradient an image). This is so different from Android. Here's a class I have to define a returnable gradient scheme: import UIKit extension CAGradientLayer { func backgroundGradientColor() -> CAGradientLayer { let topColor = UIColor(red: (0/255.0), green: (153/255.0), blue:(51/255.0), alpha: 1) let bottomColor = UIColor(red: (0/255.0), green: (153/255.0), blue:(255/255.0), alpha: 1) let gradientColors

问题 I'm using CSS3 and RGBA to create a white-to-transparent gradient: div { background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(left, rgba

问题 I started using CSS gradients, rather than actual images, for two reasons: first, the CSS gradient definitely loads faster than an image, and second, they aren't supposed to show banding, like so many raster graphics. I started testing my site on various screens recently, and on larger ones (24+ inches), the CSS linear gradient which constitutes my site's background shows very visible banding. As a provisional fix, I've overlaid the gradient with a small, repeating, transparent PNG image of

问题 I'm looking to achieve an effect similar to that in this example. However, the above example uses a gradient that is relative to the visible plot. So the 0 stop color is used at the peak of the visible plot (whatever the actual value of the peak), and the 1 stop color is used at the base. Say I have data that can range from 0 to 100 (e.g. a percentage). I want to be able to specify that "dark" is always used for a value of 100, while "light" is always used for a value of 0. So, if my visible

问题 This question already has answers here : Why does styling the background of the body element affect the entire screen? (7 answers) Closed last year . When using linear-gradient CSS property, the background appears without stripes when using left and right as direction value. But when direction value is given as top or bottom, stripes appears in the background. Is there any way that we can remove the stripes? Here is the code: body { background: linear-gradient(to top, red, yellow); } 回答1: You

问题 In an SVG gradient you can set the start x y and end x y position. Is it possible to do that in CSS linear gradient but using unanchored, independent start and end positions (images shown below)? Here is my CSS linear gradient: #rectangle { width: 100%; height: 200px; position: absolute; top: 0; left: 0; background: linear-gradient(225deg, rgba(255,255,255,1) 0%, rgba(250,0,0,1) 27.59%, rgba(108,22,95,1) 76.35%, rgba(39,32,32,1) 100%) } <div id="rectangle"> </div> Here is the expected output

问题 In this design I need the red background color of each cell partially changed say the first cell 100% second cell 100% and the third cell 50%. Update: I have made a change where cell's background property is changed from red to background: linear-gradient(to right, red 50%, white 51%) but it has one problem that the edge on the right is not sharp and fades out gently blending into the white background, how to avoid that look? 回答1: Note: There are already few questions regarding hard-stop

问题 I'm trying to do a zig zag border on a button. I have googled one solution, but the zig zag border in this solution is at the bottom, but I needed it at the right side. I was trying to rewrite the solution, but unfortunately the linear gradient is too hard for me. I was only able to create weird shapes. Can you, please, help me to rewrite the solution to be on the right? My CSS: -webkit-mask-image: linear-gradient(0deg, transparent 30px, white 30px), linear-gradient(-135deg, white 15px,

问题 #fg { fill: url(#ship); stroke: #fff; stroke-width: 10px; stroke-dasharray: 1024px; -webkit-animation: dash 2s; animation: dash 2s; } @keyframes dash { from { stroke-dashoffset: 1024px; } to { stroke-dashoffset: 0px; } } @-webkit-keyframes dash { from { stroke-dashoffset: 1024px; } to { stroke-dashoffset: 0px; } } #bg { fill: white; stroke: none; transform-origin: 1270px 550px; -webkit-animation: bgfill 2s linear 2s forwards; animation: bgfill 2s linear 2s forwards; } @keyframes bgfill { from

问题 How to draw such an shape via css in a single section(div)? currently i have used three div check my code :) The idea is simple, for top, from horizontally middle the orange color first need to go down at 45 degree till next 100px and then it should go at 180 degree for remaining part. For bottom, from horizontally middle the orange color first need to go down at 45 degree till next 100px and then it should go at 180 degree for remaining part. All this needs to be done for a single container