linear-gradients

问题 css3 gradient does not work on all browsers it works on chrome only my code <nav class="navbar navbar-default navbar-fixed-top" style="background: -webkit-gradient(linear, 31% 60%, 24% 96%, from(#0071BC), to(#FFFFFF), color-stop(.5,#0071BC)) !important; background: -o-gradient(linear, 31% 60%, 24% 96%, from(#0071BC), to(#FFFFFF), color-stop(.5,#0071BC)) !important; background: -moz-gradient(linear, 31% 60%, 24% 96%, from(#0071BC), to(#FFFFFF), color-stop(.5,#0071BC)) !important; border:2px

问题 Since this code works with the -moz vendor prefix I thought it would work a well with -webkit or -ms for instance, but it doesn't seem to allow it: background-image: -moz-linear-gradient(center top , rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.95) 100%); I guess Mozilla is allowing something that shouldn't be used, but my research has been infructuous as of now... Any idea? 回答1: Remove the center . Then it should work. Also make sure you have it for all

问题 Good morning, I want to have the same background as in header, where is line gradient. html, body { margin: 0; background: #d8dfe9;} header{position: relative; height: 90px; width: 100%; background: linear-gradient(to right, #045FB4 0%,#00BFFF 100%);} header:after {content: ''; position: absolute; left: calc(50% - 4.8px); top: 90px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid blue; clear: both; z-index: 1;} main

问题 I have this DnD application where i use CSS "linear-gradient" to show the user where a blind spot is. It looks like this: https://jsfiddle.net/y03q0zmn/1/ <div class="elementsDiv ui-draggable ui-draggable-handle" id="29065-1_104" data-weight="945" data-nr="104" style="width: 159.5px; height: 20px; background: linear-gradient(to right, rgb(194, 194, 214) 0%, 24.2px, rgba(0, 0, 0, 0) 24.2px, rgba(0, 0, 0, 0) 115.2px, rgb(194, 194, 214) 115.2px, rgb(194, 194, 214) 100%); position: absolute; left

问题 I want to have a resposive checkerboard background that should look like the background in a color selector: What I tried: .chess { background-image: linear-gradient(90deg, #999 30px, white 30px), linear-gradient(90deg, white 30px, #999 30px), linear-gradient(90deg, #999 30px, white 30px), linear-gradient(90deg, white 30px, #999 30px), linear-gradient(90deg, #999 30px, white 30px), linear-gradient(90deg, white 30px, #999 30px), linear-gradient(90deg, #999 30px, white 30px); background

问题 I've found a lot of sites that explain that an IE gradient should be made using: .IEGradient { filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#AAAAAA', endColorstr='#BBBBBB'); } but since I would need to be able to accept the direct input of colours by users, I'd like to know if these *Colorstr s are limited to just the #RRGGBB format, or if other formats such as #RGB or rgb(r, g, b) etc. would also work. I've tried googling for answers, but I couldn't find

问题 (SVG or WPF XAML - I'm open to (and need) both. I don't suppose they are any different in implementation. Below example is in SVG). I'm trying to find a way to use rotation on a linear gradient (in this case 270°), but then when the shape it fills is rotated, keep the linear gradient unchanged, as if the shape it is filling isn't rotated. By way of example, this is what Microsoft Word can do. When filling an AutoShape with a linear gradient, you can uncheck "Rotate with shape" and then the

问题 So I've been at it for a while trying to achieve this one shape with CSS with no good solutions. I need this to be an image because this div may resize and I want it to stay intact. I've also attempted to create an SVG which did not work out very well, I've seen some people work with gradient to make shapes but I'm not able to find any good guide to point me in the right direction. Any help is appreciated :) 回答1: Using gradients with angles is not fit for your case because (as already pointed

问题 I have a header in my website which currently use a linear gradient to move from one color to the other. This is the CSS: #top-header { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 99999; /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(100%, #be2e26), color-stop(20%, #be2e26), color-stop(20%, rgba(22, 22, 22, 0)), color-stop(20%, rgba(22, 22, 22, 0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #be2e26 100%, #be2e26 40%,

问题 On my way to finding a CSS solution to have an evenly colored element with angled beginning to avoid images I stumbled across this simple example: http://dabblet.com/gist/1780333 . This one is working fine, even in IE of the latest, only Safari is reversing it completely, putting it to the end instead of the beginning AND turning the angle partly, at least in my live site it's not consistent. I have, of course, the same values for all browser versions. Anybody an idea why it is so and what