【问题标题】:CSS rgba in Internet ExplorerInternet Explorer 中的 CSS rgba
【发布时间】:2014-04-05 01:19:38
【问题描述】:

我有 RGBa 不透明背景的盒子。它适用于除 IE 之外的所有浏览器。我在 IE 8 上试过。IE 显示没有背景的页面(rgba 颜色)。我尝试了 ms 过滤器:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000); 

缩放:1;和 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";它不起作用。这是我的后台代码:

background-image: -webkit-linear-gradient(270deg,rgba(238,242,243,0.65) 30.57%,rgba(239,239,239,0.89) 100%); background-image: linear-gradient(180deg,rgba(238,242,243,0.65) 30.57%,rgba(239,239,239,0.89) 100%);

和盒子的完整代码:

   .box1 {
    height: 1100px;
    width: 800px;
    margin-right: auto;
    margin-left: auto;
    background-size: cover;
    background-repeat: repeat;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    -moz-box-shadow: 20px 20px 20px #CCC;
    -webkit-box-shadow: 20px 20px 20px #CCC;
    box-shadow: 20px 20px 20px #CCC;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-image: -webkit-linear-gradient(270deg,rgba(238,242,243,0.65) 30.57%,rgba(239,239,239,0.89) 100%);
    background-image: linear-gradient(180deg,rgba(238,242,243,0.65) 30.57%,rgba(239,239,239,0.89) 100%);}

【问题讨论】:

    标签: html css background opacity rgba


    【解决方案1】:

    为了让 IE8 使用 CSS RGBa 属性,您需要将 IE8 语法放在 RGBa 条目的开头;在任何 webkit 或符合标准的条目之前:

    /* IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000)";
    
    /* Other Browsers */
    -webkit-linear-gradient(270deg,rgba(238,242,243,0.65) 30.57%,rgba(239,239,239,0.89) 100%);
    
    linear-gradient(180deg,rgba(238,242,243,0.65) 30.57%,rgba(239,239,239,0.89) 100%);
    
    /* IE9+ */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000); 
    

    【讨论】:

    • 它对我不起作用。它适用于其他浏览器,但 IE8 仍然显示没有背景的页面。
    • @user3289606 你还需要设置background: transparent; 我相信。
    • 我定义背景:透明; RGBA 条目的开头,但它仍然无法正常工作。我试过背景颜色:透明;也。我不知道问题出在哪里。
    猜你喜欢
    • 2015-08-24
    • 2020-05-23
    • 2017-08-09
    • 2012-05-23
    • 1970-01-01
    • 1970-01-01
    • 2012-03-26
    • 2013-05-03
    • 1970-01-01
    相关资源
    最近更新 更多