首次在 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>
最佳答案
那是因为您已将 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; }
您需要创建两个单独的规则，如果您希望每个 div 中有两个不同的背景图像，则每个 div 一个。
简而言之，执行以下操作:
1)删除整秒<style>...</style> block
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; }
关于html - 每张 MDlite 卡的新背景图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40638702/