html - 样式表的 CSS 覆盖问题

Question

我是这方面的新手，所以如果这没有意义，请原谅。在此 CSS 样式表的 #topbar2 部分中，我希望图像 NAFF_webtracker_logo.gif 出现。我相信我只需要覆盖文档的这一部分，因为它继承自 defaultstyle.css。这是在我无法编辑 defaultstylesheet.css 的应用程序中。有没有一种方法可以覆盖此部分以显示我的 Logo ？我的编码似乎正确，但图像不显示。

感谢任何帮助。

科林

/*
This file inherits all the styles from DefaultStyle.css
Please make sure that the following import link is present if you want to inherit default styles.
Any changes in fonts, colours, layout, etc. can be done via overriding CSS style elements after the import statement.

Good CSS guide is located at

http://www.htmlhelp.com/reference/css/

*/
@import url(DefaultStyle.css);

/* put your changes below this comment */
body
{
 background-image: url(images/BG.gif);
 background-color: none;
 background-position: left top;
 background-repeat: no-repeat;
 color: #666666;
 padding: 0;
 margin: 0;
 font-size: 11px;
}
#OuterContentPane 
{
    padding: 15px 30px 20px 30px;
    background: none;
    border-left: 0px solid;
    border-left-color: #ffffff;
    border-right: 0px solid;
    border-right-color: #ffffff;
}

#pagehead
{
    height: 204px;
    border-bottom: 0px solid #000000;
    background: #fff !important;
}

#topbar1
{
    color: #ffffff;
    /*background: none url(images/TopR.gif) no-repeat top left;*/
    height: 204px;
}

#topbar2
{
    color: #ffffff;
    background: url(images/NAFF_webtracker_logo.gif) no-repeat top left; 
    height: 204px;
}

.loginBox
{
    border: 1px solid #dfdfdf;
    background: #ddedf5 url(images/Boxag.gif) repeat-x top left;
    color: #666666;
    padding: 10px 10px 10px 10px;
    width: 170px;
}

.loginBox input[type="text"], .loginBox input[type="password"]
{
    width: 169px;
}

.loginBox a, .loginBox a:visited
{
    color: #666666;
}

.loginBox a:hover
{
    color: #000000;
}

.LoginInstruction
{
    position: absolute;
    border: 1px solid #dfdfdf;
    background: url(images/BoxBg.gif) repeat-x top left;
    color: #666666;
    padding: 15px;
    left: 264px;
    top: 220px;
    right: 16px;
    height: 322px;
}

#LoginStatusString
{
    text-align: right;
    color: #00A4E4;
    background: none;
    top: 113px;
    right: 0px;
}

#menu
{
    text-decoration: none;
    font-weight: normal;
    background: none;
    text-align: center;
    font-size: 9pt;
    left: 231px;
    top: 149px;
    font-variant: normal;
    line-height: 26px;
    /*text-transform: uppercase;*/
}

#menu li 
{
    width: 124px;
    height: 26px;
    color: #00a4e4;
    text-decoration: none;
    background: url(images/MButtH.gif) no-repeat top left;
    border: 0px solid;
}

#menu a, #menu a:visited
{
    color: #005596;
    background: url(images/MButt.gif) no-repeat top left;
    text-decoration: none;
    display: inline-block;
}

#menu a:hover  
{
    color: #00a4e4;
    text-decoration: none;
    background: url(images/MButtH.gif) no-repeat top left;
}

.DetailsTable 
{ 
    padding: 0px;
    font-size: 11px;
}

.DetailsHeader
{
    color: #005596;
    font-size: 12px;
    vertical-align: middle;
    line-height: 24px;
}

.DetailsHeader td
{
    background-image: url(images/MButt.gif);
    background-repeat: repeat;
    background-position: top left;
}

.DetailsHeader a
{
    color: #005596;
    font-weight: Normal;
}

.DetailsHeader a:hover
{
    color: #000000;
}

a,
a:visited
{
    color: #666666;
    background: inherit;
}

a:hover
{
    color: #000000;
    background: inherit;
}

select, input
{
    font-size: 11px;
}

.ContentSection
{
    padding-left: 0px; 
    margin-top: 10px;
    padding-bottom: 0px;
    background: none;
}

.DetailsCell
{
    color: #666666;
    background: none;
}

.DetailsAlternatingCell
{
    color: #666666;
    background: #ebf9fe;
}

.TimeLineLegend
{
    display: inline-block;
    font-weight: bold;
    background: none;
    color: #000000;
    text-align: center;
    padding: 5px 5px 5px 5px;
    border: solid 1px gray;
}

.TimeLineOverdue
{
    background: #ffb6c1;
    color: #000000;
    white-space: nowrap;
    text-align: center;
}

.TimeLinePending
{
    background: #FFFF00;
    color: #000000;
    white-space: nowrap;
    text-align: center;
}

.TimeLineCompleted
{
    background: #98fb98;
    color: #000000;
    white-space: nowrap;
    text-align: center;
}

.TimeLineCompletedLate
{
    background: #ffcc99;
    color: #000000;
    white-space: nowrap;
    text-align: center
}

.TimeLineEstimate
{
    font-style: italic;
    color: #000000;
    background: inherit;
    white-space: nowrap;
    text-align: center;
}

.Button.FilterStripGroup_none
{
    background-color: #ffffff;
}

#pagefooter
{
    text-align: left;
    padding-top: 8px;
    border-top: 0px solid #000000;
    border-bottom: 0px solid #000000;
    margin-left: 30px;
    margin-right: 30px;
    height: 30px;
    color: #666666;
    font-size: 9px;
    padding-left: 24px;
    background: #dfdfe0;
}

#PageFooter a,
#PageFooter a:visited
{
    color: #666666;
    font-size: 10px;
}

#PageFooter a:hover
{
    color: #000000;
    font-size: 10px;
}

#LanguageSelection
{
    position:absolute;
    right: 10px;
}











html{
    overflow-x:hidden;
}

#OuterContentPane{
    background-image: url('Images/Rectangle2.jpg');
    background-size: cover;
    padding: 65px 30px 20px 30px !important;
}

#topbar1{
    background-size: cover;
    background-image:url('Images/header.jpg');
    background-position: -50px -45px;
    background-repeat: no-repeat;   
}

#topbar2{
    display: none;
}

#loginBox, #QuickViewDetails{
    margin: 0 auto; 
    min-width: 250px;
    max-width: 440px
    max-width:100%;
    background-color: #fff;
    padding: 20px 40px
}
#OuterContentPane select, #OuterContentPane input{
    max-width: 300px;
    padding: 5px 6px;
}


.loginBox input[type="text"], .loginBox input[type="password"]{
    width: 100% !important;
    padding: 5px;
    margin-bottom: 15px;
    padding: 5px 6px;
    background: #fff;
}

#SigninBtn, #FindBtn{
    padding: 5px 19px;
    border-radius: 0px;
    background-color: #BF4646;
    color: #fff;
    margin-bottom: 20px;
    border: none;
    cursor:pointer;
    -webkit-transition: background-color .8s; /* Safari */
    transition: background-color .8s;
}


#SigninBtn:hover, #FindBtn:hover{
    background-color:#09517B;
    -webkit-transition: background-color .8s; /* Safari */
    transition: background-color .8s;
}

#pagefooter{
    background-color:#333;
    margin: 0px;
    width:100%;
    min-height:75px;
    color:#fff;
}

#menu{
    width: 100%;
    left: 1px;
    top: 160px;

}
#menu, #menu *{
    background:#fff !important;
}

#menu > li{
    width: 14.2%;
    min-width: 95px;
}

#menu > li > ul{
    min-width: 200px;
    width: auto;
}

#ctl06_ctl01_ctl62_ctl00, #ctl06_ctl01_ctl61_ctl00{
    max-width: 110px;
}

@media(max-width:400){
    #topbar1{
        background-position: -40px -30px;
    }
}

Answer 1

您可以在 CSS 中使用 !important 关键字。这将覆盖默认样式。

#topbar2
{
    color: #ffffff;
    background: url(images/NAFF_webtracker_logo.gif) no-repeat top left !important; 
    height: 204px;
}