如何使跨浏览器渐变混合在指南针，与IE9，IE8，IE7和Opera？ [英] How to make cross browser gradient mixin in compass, with IE9, IE8, IE7 and Opera?

查看：253 发布时间：2017/2/19 2:51:30 css3 compass-sass sass

本文介绍了如何使跨浏览器渐变混合在指南针，与IE9，IE8，IE7和Opera？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想为所有浏览器（包括IE9 IE9，IE8，IE7和Opera）制作mixin。

像 http://www.colorzilla.com/gradient-editor/ 生成代码

它生成

 背景：＃1e5799; / *旧的浏览器* / 
 / * IE9 SVG，需要'过滤器'为'none'* / 
背景条件覆盖：网址（数据：图像/ SVG + XML; BASE64，PD94bWwgdmVyc2lvbj0iMS4wIiA / Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI + CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8 + CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8 + CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8 + CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ + CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc +）; 
 background：-moz-linear-gradient（top，＃1e5799 0％，＃2989d8 50％，＃207cca 51％，＃7db9e8 100％）; / * FF3.6 + * / 
 background：-webkit-gradient（linear，left top，left bottom，color-stop（0％，＃1e5799），color-stop（50％，＃2989d8），color -stop（51％，＃207cca），色停（100％，＃7db9e8））; / * Chrome，Safari4 + * / 
 background：-webkit-linear-gradient（top，＃1e5799 0％，＃2989d8 50％，＃207cca 51％，＃7db9e8 100％）; / * Chrome10 +，Safari5.1 + * / 
 background：-o-linear-gradient（top，＃1e5799 0％，＃2989d8 50％，＃207cca 51％，＃7db9e8 100％）; / * Opera 11.10+ * / 
 background：-ms-linear-gradient（top，＃1e5799 0％，＃2989d8 50％，＃207cca 51％，＃7db9e8 100％）; / * IE10 + * / 
 background：linear-gradient（top，＃1e5799 0％，＃2989d8 50％，＃207cca 51％，＃7db9e8 100％ / * W3C * / 
 filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃1e5799'，endColorstr ='＃7db9e8'，GradientType = 0）; / * IE6-8 * /

对于IE9我们需要设置 filter ：none

支持使用IE9（使用SVG）的完整多站式渐变。为所有具有渐变的元素添加一个
gradient类，并将
添加到您的HTML中以完成IE9支持：
 <！ -  [if gte IE 9]> 
< style type =text / css> 
 .gradient {
 filter：none; 
} 
< / style> 
<！[endif]  - > 
  

Compass有梯度的最新模块 http://compass-style.org/reference/compass/css3/images/ ，我们可以在之后使用调用 $ experimental-support-for-svg：true ，例如使用

  .gradient {@include linear-gradient（＃000000，＃ff0000）}

给出像这样的输出。

  .gradient {
 background-image：url（'data：image / svg + xml; BASE64，PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI + PGRlZnM + PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI + PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ + PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8 + PC9zdmc + IA =='）; 
 background-size：100％; 
 background-image：-webkit-gradient（linear，50％0％，50％100％，color-stop（0％，＃000000），color-stop（100％，＃ff0000））; 
 background-image：-webkit-linear-gradient（＃000000，＃ff0000）; 
 background-image：-moz-linear-gradient（＃000000，＃ff0000）; 
 background-image：-o-linear-gradient（＃000000，＃ff0000）; 
 background-image：-ms-linear-gradient（＃000000，＃ff0000）; 
 background-image：linear-gradient（＃000000，＃ff0000）; 
}

如果我们比较 指南针图片 将此代码编码为colorzilla代码

它缺少的是IE6-8

filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃1e5799' endColorstr ='＃7db9e8'，GradientType = 0）; / *
IE6-8 * /

以及旧版浏览器 background：＃1e5799; / *旧浏览器* /

而且使用 background-image 背景

并且有一个额外的属性 background-size：100％;

且此页面上没有指示
http： //compass-style.org/reference/compass/css3/images/ 如何
解决IE9需要的 filter：none li>

我的问题：

background-size：100％; ？

使用有没有办法添加 c：

 c $ c>到
中的IE9的元素Compass？ 
 如何在指南针中获取IE6-8兼容的代码 filter：
 progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃1e5799'，
 endColorstr ='＃7db9e8'，GradientType = 0）; ？

解决方案

background-size的好处是什么：100％;？使用background-image代替背景的好处是什么？

SVG图像是背景图像，并且该属性的内容是程序生成的图像。为了保持一致，Compass使用背景图像。此外，指定 background-image 可以允许编码器指定 background-color ，不会被mixin。

 
 
 设置 background-size 确保图像实际上延伸到填充元素的空间，而不是是图像本身的大小。
 
 有没有办法在Compass中为IE9添加过滤器：none？ p> 
 
 
如何获得IE6-8兼容的代码在指南针像这样的过滤器：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃1e5799'，endColorstr ='＃7db9e8' GradientType = 0）;？
 
 
这两个选项都有三个选项：
 
 扩展mixin /编写自己的mixin。所包含的mixins只是存储在Compass安装位置的文件，因此您可以随时编辑它们，或使用它们创建自己的mixins。
 
  使用CSS3 PIE与指南针  
 
 将特定于IE的代码放入一个或更多的IE特定的样式表（这是我的首选方法，如果PIE不是一个选项，因为它沙盒CSS，所以你不必做hack获得一个版本或另一个忽略一个给定的CSS行）。 
 
 
 
I want to make mixin for all browser including IE9  IE9, IE8, IE7 and Opera.

Like http://www.colorzilla.com/gradient-editor/ generate the code

it generate 
background: #1e5799; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */
And for IE9 We need to set filter:none

  Support for full multi-stop gradients with IE9 (using SVG). Add a
  "gradient" class to all your elements that have a gradient, and add
  the following override to your HTML to complete the IE9 support:
<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

Compass has latest module for gradient http://compass-style.org/reference/compass/css3/images/ which we can use after calling $experimental-support-for-svg: true and for example use like this
.gradient {@include linear-gradient(#000000, #ff0000)}
Which gives output like this
.gradient {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #000000), color-stop(100%, #ff0000));
  background-image: -webkit-linear-gradient(#000000, #ff0000);
  background-image: -moz-linear-gradient(#000000, #ff0000);
  background-image: -o-linear-gradient(#000000, #ff0000);
  background-image: -ms-linear-gradient(#000000, #ff0000);
  background-image: linear-gradient(#000000, #ff0000);
}
if we compare compass Image code this to colorzilla code 


it's missing which is for IE6-8

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /*
IE6-8 */
and for older browsers background: #1e5799; /* Old browsers */
and it's using background-image instead background
and it has one extra property background-size: 100%;
and there is no instruction on this page
http://compass-style.org/reference/compass/css3/images/ for how to
solve filter:none required for IE9.


My questions:


What is the benefit of background-size: 100%;?
What is the benefit of using background-image instead background?
Is there a way to add filter:none to the element only for IE9 in
Compass?
How to get IE6-8 compatible code too in compass like this filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799',
endColorstr='#7db9e8',GradientType=0 );?

 解决方案 

  What is the benefit of background-size: 100%;? 
  
  What is the benefit of using background-image instead background?
SVG images are background images, and the contents of that property is a programatically generated image. To keep it consistent, Compass uses the background image. Additionally, specifying background-image can allow the coder to specify a background-color that won't get nuked by the mixin.

Setting background-size ensures that the image actually stretches to fill the space of the element, instead of being the size of the image itself.

  Is there a way to add filter:none to the element only for IE9 in Compass?
  
  How to get IE6-8 compatible code too in compass like this filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );?
There are three options to both of these:

Extend the mixin/write your own mixin. The included mixins are just files that are stored in Compass's install location, so you can always edit them, or use them to create your own mixins.
Use CSS3 PIE with Compass.
Put the IE-specific code into one or more IE-specific stylesheets (this is my preferred method if PIE isn't an option, as it sandboxes the CSS, so you don't have to do hacks to get one version or another to ignore a given line of CSS).


                        
这篇关于如何使跨浏览器渐变混合在指南针，与IE9，IE8，IE7和Opera？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！


                    
                        查看全文

如何使跨浏览器渐变混合在指南针，与IE9，IE8，IE7和Opera？ [英] How to make cross browser gradient mixin in compass, with IE9, IE8, IE7 and Opera?

问题描述

我的问题：

My questions:

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

如何使跨浏览器渐变混合在指南针，与IE9，IE8，IE7和Opera？ [英] How to make cross browser gradient mixin in compass, with IE9, IE8, IE7 and Opera?

问题描述

我的问题：

My questions:

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭