linear-gradients

问题 I want to have a background gradient, e.g. background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(2, 126, 174, 0.9)) on the body of my document which extends across the entire height of the body - and scrolls with the body. Using background-attachment: fixed; I get the entire height (of the viewport), but it, well, stays fixed. background-attachment: scroll; gets me the scrolling, but then it just extends across the viewport height. Any way to get both? Edit: As Boltclock pointed out

问题 For my online game UI, I decided to make Hill Climb Racing (Android Game) 's buttons. This is is what I have presently : body { color: white; font-family: Impact, fantasy; font-size: 40px; line-height: 100px; text-align: center; } .rect { height: 100px; width: 280px; background: #545D60; border-radius: 20px 50px 50px 20px; position: relative; } .rect:before { background: #545D60; content: ""; position: absolute; top: 6px; left: 195px; height: 0px; width: 0px; border-radius: 30px 10px; border:

问题 I just wanted to create a two color gradient using bootstrap mixin functions. So my gradient should be like this: when using bootstrap gradient mixin I found there is no any function to match with my requirement. So I tried making my own gradient mixin and added it to bootstrap/less/mixins/grandients.less. But my function didn't do my job.. This is the gradient mixin I added to gradients.less .vertical-custom(@start-color: #ed3537; @start-percent: 0%; @mid-color: #ed3537; @color-stop: 50%;

问题 I try to use them both but it fails.. h1 { font-size: 72px; background: linear-gradient(to top, black 50%, orange 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; } <h1>Heading 1</h1> Using only linear-gradient without text-shadow: Using only text-shadow without linear-gradient: Using both: 回答1: Based on this previous answer here is an idea where you will need to duplicate the text: h1 { font-family

问题 I am wondering about possibility to make linearGradient across (from top to bottom) the line, as opposed to the example below where the gradient goes along (from left to right) the line. <svg xmlns="http://www.w3.org/2000/svg" version="1"> <defs> <linearGradient id="e" x1="40" y1="210" x2="460" y2="210" gradientUnits="userSpaceOnUse"> <stop stop-color="steelblue" offset="0" /> <stop stop-color="red" offset="1" /> </linearGradient> </defs> <line x1="40" y1="210" x2="460" y2="210" stroke="url(

问题 I need to create a dashed line with a linear gradient. I managed to create a dashed line using <hr /> and the following styling: line { border: 0px; border-bottom: 2px dashed; } And I also know that to achieve a gradient I need to do: background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(black)); 回答1: Based on the code in your own answer, it looks like you need a line which is a gradient in itself (from blue to green) and also have dashed pattern. This is not possible to achieve

问题 how to make a button with an obtuse angle? I would like to happen like this I got here so My code - Fiddle *{ box-sizing: border-box; } .btn{ display: inline-block; padding: 16px 30px; color: #fff; border: 1px solid #4A803C; position: relative; border-radius: 3px; background: rgb(74,168,28); /* Old browsers */ background: -moz-linear-gradient(top, rgba(74,168,28,1) 0%, rgba(63,155,19,1) 100%, rgba(56,146,12,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(74,168,28,1) 0%

问题 I am using gulp with autoprefixer in my project, and I have to use backgrounds gradient like this: background: linear-gradient(#e98a00, #f5aa2f); but output is: background:-webkit-linear-gradient(#e98a00,#f5aa2f); background:linear-gradient(#e98a00,#f5aa2f); What wrong with me? Part of Gulpfile.js gulp.task('styles', function() { return gulp.src(['css/less/mainPage.less']) .pipe(plumber()) // .pipe(concat('base.scss')) .pipe(less()) .pipe(prefix([{ browsers: ['IE 8', 'IE 9', 'last 5 versions'

问题 Is it possible to have multiple background color for a Table cell like in the image below? Two color table cell background seems to do something like what I want but it is not exactly diagonal. 回答1: Both the existing answers are good and this is not at attempt to put them down in any way. This is an improvement on them which can be used if you want responsive design with gradients. As already mentioned in the other two answers (and seen in the snippet below), the gradient's angles should be

问题 After a good amount of search I am stuck with linear-gradient which works in Firefox but not in Chrome. I added -webkit- before linear-gradient as described in one reference but still not working I think the problem is in gradient axis My code <nav class="top_menu"> <ul class="black_high"> <li class="first active"> <a href="#">Home</a> </li> <li> <a href="#">news</a> </li> </ul> </nav> .top_menu ul li.active a::after { position: absolute; bottom: 8px; left: 0; width: 100%; height: 2px;