首先发布在StackOverflow上但是长期用户。我想在我的网站上添加两张MDlite卡，每张卡都有不同的背景图片，但最后声明的背景图片总是显示在两者上。很感谢任何形式的帮助。以下是您可以在任何浏览器中查看问题的完整代码（抱歉格式化，在手机上执行此操作）：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Website Title</title>
<meta name="description" content="Percula Creative">
<meta name="author" content="Percula Creative Author">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.deep_purple-orange.min.css" />
<script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if IE]><link rel="shortcut icon" href="favicon.ico"><![endif]-->
<link rel="icon" href="favicon.png">
</head>
<body>
<!-- Uses a transparent header that draws on top of the layout's background -->
<style>
.demo-layout-transparent {
background: url('../assets/demos/transparent.jpg') center / cover;
}
.demo-layout-transparent .mdl-layout__header,
.demo-layout-transparent .mdl-layout__drawer-button {
/* This background is dark, so we set text to white. Use 87% black instead if
your background is light. */
color: white;
}
</style>
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<a href="index.html" style="text-decoration: none; color:white" class="mdl-layout-title">Website Title</a>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" href="apps.html">Apps</a>
<a class="mdl-navigation__link" href="">About</a>
<a class="mdl-navigation__link" href="">Contact</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Website</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Apps</a>
<a class="mdl-navigation__link" href="">About</a>
<a class="mdl-navigation__link" href="">Contact</a>
</nav>
</div>
<main class="mdl-layout__content" style="background-color: #EEEEEE;">
<div class="page-content" >
<div style="width:80%; max-width:780px; margin: 0 auto; padding: 16px">
<!-- Wide card with share menu button --> <style> .demo-card-wide.mdl-card { width: 100%; } .demo-card-wide > .mdl-card__title { color: #fff; height: 176px; background: URL('http://www.imagenspng.com.br/wp-content/uploads/2015/07/minions-03.png') center / cover; } .demo-card-wide > .mdl-card__menu { color: #fff; } </style>
<div class="demo-card-wide mdl-card mdl-shadow--2dp"">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text"></h2> </div>
<div class="mdl-card__supporting-text">
<p>Lorem Ipsum dolor1...</p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="">Download</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</div>
<div style="width:80%; max-width:780px; margin: 0 auto; padding: 16px">
<!-- Wide card with share menu button --> <style> .demo-card-wide.mdl-card { width: 100%; } .demo-card-wide > .mdl-card__title { color: #fff; height: 176px; background: URL('http://i2.mirror.co.uk/incoming/article6379795.ece/ALTERNATES/s615b/Minion.jpg') center / cover; } .demo-card-wide > .mdl-card__menu { color: #fff; } </style>
<div class="demo-card-wide mdl-card mdl-shadow--2dp"">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text"></h2> </div>
<div class="mdl-card__supporting-text">
<p>Lorem Ipsum dolor2...</p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="">Download</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
答案 0 :(得分：3)
这是因为你已经将CSS内联到页面中两次，第二次是覆盖第一次。这一行CSS影响了两个div，而不仅仅是第一个或第二个。
.demo-card-wide > .mdl-card__title { color: #fff; height: 176px; background: URL('http://www.imagenspng.com.br/wp-content/uploads/2015/07/minions-03.png') center / cover; }
如果你想要两个不同的背景图像，你需要创建两个单独的规则，每个规则一个。
简而言之，请执行以下操作：
1）删除整个第二个<style>...</style>块
2）向第二个div添加一个新类，使其成为
<div class="mdl-card__title second">
3）将新的css规则添加到您的第一个<style>...</style>块中
.demo-card-wide > .mdl-card__title.second { color: #fff; height: 176px; background: URL('http://i2.mirror.co.uk/incoming/article6379795.ece/ALTERNATES/s615b/Minion.jpg') center / cover; }