阻止来自html的内联css,并使用来自外部css的渐变背景

  • 本文关键字:css 渐变 背景 外部 html html css
  • 更新时间 :
  • 英文 :


我不确定这是否可能,但我有一个从HTML风格化的图像。 当我得到这份工作时,这已经是这样了。

现在我需要更改样式,但是,我无法触摸 HTML。 它需要保持原样。

我试过了

background-image: none;

但是,我来自css的渐变背景也不起作用。

我会给你看我的HTML和CSS

在代码笔

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>

!important添加到样式属性中,以便它覆盖其他样式,如下所示:

background: linear-gradient( 45deg, blue, red ) !important;  

最新更新