3

我的页面正在引用具有定义的 CSS 样式表：

html {background-color:#FFFFFF;background-image:url('../images/Background.png');background-repeat:repeat-x; }

如何background-image在页面级别覆盖元素？我只需要在我的应用程序中覆盖一页的设置。

4

5 回答 5

5

向 html 元素添加一个类，然后使用一些内联样式来覆盖外部样式表的样式。您还可以将内联样式放在外部样式表中，这是最佳实践。

<html class="myHtmlTag">
   <head>
     <link href="externalStyle.css" rel="stylesheet"/>
    <style>
     html.myHtmlTag{
       background: none !important;
       background-image:none !important;
     }
    </style>
   </head>
   <body></body>
</html>
于 2012-10-10T00:22:22.100 回答
1

如果您只定位html标签而没有任何其他选择器，那么您可以简单地html在主 css 之后包含另一种样式。根据 CSS 的特殊性——它们每个只有 1 个标签的值（没有 id，没有类）——所以后者将为元素设置样式。

<html>
<head>

<link rel="stylesheet" href="main.css" /> 

<!-- anywhere from here down you can include a style to over ride html -->

这是一个快速演示：

html {background-color:#000;background-image:url('http://lxmpro.com/cms/wp-content/uploads/2012/01/site-background-pattern-07.jpeg');background-repeat:repeat-x; }


/*  second reference to html tag overrides the first */
html {background-image:url('http://www.noupe.com/wp-content/uploads/2009/10/wallpaper-pattern.jpg');}

工作演示 - http://jsfiddle.net/K68D3/

于 2012-10-10T00:43:01.533 回答
0

在样式上使用!important属性，如下所示：background background-image

html{background-color:#000000 !important;background-image:url('your/image/path') !important;...}
于 2012-10-10T00:22:06.503 回答
0

您可以将类应用于body标签吗？IE：

<body class="home"> 
<body class="articlepage">

否则，您在技术上可以使用 jQuery，假设您可以访问页面上的代码以执行该功能但被锁定

<script>$("body").addClass("home");</script>

- - 或者 - - - 

<script>$("body").addClass("articlepage");</script>

这些允许您上课：

body.home {background-image:url(homebg.jpg);}
body.articlepage {background-image:url(articlebg.jpg);}
于 2012-10-10T00:27:46.330 回答
0

类背景颜色的基本内联样式覆盖：

<!DOCTYPE html>
<html>
<head>
<style>
.city {
    background-color: orange;
    color: white;
    padding: 10px;
}
</style>
</head>

<body>

<h2 class="city" style="background-color: tomato;">London</h2>
<p>London is the capital of England.</p>

</body>
</html>
于 2017-11-29T19:31:04.987 回答