2017-08-18 2 views
0

これは可能ですが、私はHTMLから定型化された画像を持っています。 私は仕事を取ったとき、これはすでにそうだった。HTMLからインラインCSSをブロックし、外部CSSからグラデーションの背景を使用します。

今はスタイルを変更する必要がありますが、HTMLには触れません。 それはそのまま留まる必要があります。

私は

background-image: none; 

を試してみた。しかし、その後、CSSから私のグラデーションの背景は同様に動作しませんでした。

私はそれが他のスタイルを上書きするためにここでcodepen

https://codepen.io/anon/pen/VzQrVe

div.mh-container ul.mh-menu { 
 
    position: relative; 
 
    float: left; 
 
    background: none; 
 
    padding-left: 250px !important; 
 
} 
 

 
div.mh-container ul.mh-menu:after { 
 
    content: ""; 
 
    clear: both; 
 
    display: block; 
 
    overflow: hidden; 
 
    visibility: hidden; 
 
    width: 0; 
 
    height: 0; 
 
} 
 

 
div.mh-container ul.mh-menu li { 
 
    float: left; 
 
    margin: 0; 
 
    font-size: 11px; 
 
    font-weight: normal; 
 
    padding: 0; 
 
    position: relative; 
 
} 
 

 
div.mh-container ul.mh-menu li:first-child { 
 
    margin: 0; 
 
} 
 

 
li[id^="mh-li-"] { 
 
    min-width: 138px; 
 
} 
 

 
div.mh-container ul.mh-menu > li { 
 
    background: none; 
 
} 
 

 
div.mh-container ul.mh-menu > li { 
 
    text-align: center; 
 
} 
 

 
div.mh-container ul.mh-menu > li > a { 
 
    /* background-image: none !important; */ 
 
    font-weight: 600; 
 
} 
 

 
div.mh-container ul.mh-menu > li a { 
 
    /* display: inline-block; 
 
    color: #aeaeae; 
 
    padding: 12px 12px 12px 24px; 
 
    text-decoration: none; 
 
    background-position: 3px 50%; 
 
    background-repeat: no-repeat; 
 
    text-transform: uppercase; 
 
    text-align: left;*/ 
 

 
    color: #161312; 
 
    text-decoration: none; 
 
    display: block; 
 
    padding: 10px 26px; 
 
    /* Text Shadow */ 
 
    text-shadow: 0 1px 0 #4b433e; 
 

 
    /* Gradient Background */ 
 
    background: #362f2c; /* Old browsers */ 
 
    background: -moz-linear-gradient(top, #362f2c 0%, #282321 100%); /* FF3.6+ */ 
 
    background: -webkit-gradient(
 
    linear, 
 
    left top, 
 
    left bottom, 
 
    color-stop(0%, #362f2c), 
 
    color-stop(100%, #282321) 
 
); /* Chrome,Safari4+ */ 
 
    background: -webkit-linear-gradient(
 
    top, 
 
    #362f2c 0%, 
 
    #282321 100% 
 
); /* Chrome10+,Safari5.1+ */ 
 
    background: -o-linear-gradient(
 
    top, 
 
    #362f2c 0%, 
 
    #282321 100% 
 
); /* Opera11.10+ */ 
 
    background: -ms-linear-gradient(top, #362f2c 0%, #282321 100%); /* IE10+ */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(
 
     startColorstr='#362f2c', 
 
     endColorstr='#282321', 
 
     GradientType=0 
 
    ); /* IE6-9 */ 
 
    background: linear-gradient(top, #362f2c 0%, #282321 100%); /* W3C */ 
 

 
    /* Border Radius */ 
 
    -webkit-border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    border-radius: 4px; 
 

 
    /* Box Shadows */ 
 
    -webkit-box-shadow: inset 0 1px 0 #564b46, 0 1px 1px #181514; 
 
    -moz-box-shadow: inset 0 1px 0 #564b46, 0 1px 1px #181514; 
 
    box-shadow: inset 0 1px 0 #564b46, 0 1px 1px #181514; 
 

 
    /* Transition Effect */ 
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
    -ms-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
} 
 

 
div.mh-container ul.mh-menu > li a:hover { 
 
    color: #73635e; 
 

 
    /* Text Shadow */ 
 
    text-shadow: 0 1px 1px #000; 
 

 
    /* Gradient Background */ 
 
    background: #282321; /* Old browsers */ 
 
    background: -moz-linear-gradient(
 
    top, 
 
    #282321 0%, 
 
    #362f2c 99%, 
 
    #362f2c 100% 
 
); /* FF3.6+ */ 
 
    background: -webkit-gradient(
 
    linear, 
 
    left top, 
 
    left bottom, 
 
    color-stop(0%, #282321), 
 
    color-stop(99%, #362f2c), 
 
    color-stop(100%, #362f2c) 
 
); /* Chrome,Safari4+ */ 
 
    background: -webkit-linear-gradient(
 
    top, 
 
    #282321 0%, 
 
    #362f2c 99%, 
 
    #362f2c 100% 
 
); /* Chrome10+,Safari5.1+ */ 
 
    background: -o-linear-gradient(
 
    top, 
 
    #282321 0%, 
 
    #362f2c 99%, 
 
    #362f2c 100% 
 
); /* Opera11.10+ */ 
 
    background: -ms-linear-gradient(
 
    top, 
 
    #282321 0%, 
 
    #362f2c 99%, 
 
    #362f2c 100% 
 
); /* IE10+ */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(
 
     startColorstr='#282321', 
 
     endColorstr='#362f2c', 
 
     GradientType=0 
 
    ); /* IE6-9 */ 
 
    background: linear-gradient(
 
    top, 
 
    #282321 0%, 
 
    #362f2c 99%, 
 
    #362f2c 100% 
 
); /* W3C */ 
 

 
    /* Transition Effect */ 
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
    -ms-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
} 
 
ul.sub div.mh-row li a { 
 
    text-transform: none; 
 
}
<div class="mh-container" style=""> 
 
    <ul id="mh-menu" class="mh-menu"> 
 
    <li id="mh-li-mc" class="mh-dc-li"> 
 
     <a id="mh-mc" href="#" class="mh-dc" style="background-image: url(https://uploaddeimagens.com.br/images/001/004/836/original/dom.png?1500668261); background-position: 2px 50%;">Minha Conta<span class="mh-dc-icon"></span></a> 
 
    </li> 
 
    </ul> 
 
</div>

+0

'background-image:none!important'を試しましたか? –

答えて

0

での私のHTMLとCSS

スタイル属性に!importantを追加を紹介しますように:

+0

私はできません、私はシルクは、CSSからの背景を使用する必要があります。私はグラデーションの色が機能したい。 – bruno

+0

投稿を編集しました。 –

+0

ありがとうございます - 私はそれを修正しようとしましたが、まだそれを行う方法が見つかりませんでした。 – bruno

関連する問題