【发布时间】：2019-04-04 14:29:17
【问题描述】：
我只是尝试采用 codepen 的 css 代码 所以我复制并粘贴并使用外部链接，但它不像 codepen 那样显示 只给我看背景颜色 为什么会这样？
我从这里引用代码 https://codepen.io/MelonBoxer/pen/eopWar
我不明白，因为来自 codepen 的每个复制和粘贴都有效，但它不是
这是我的 html 代码
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="./test.css">
</head>
<body>
<div class="blog-card spring-fever">
<div class="title-content">
<h3>SPRING FEVER</h3>
<hr />
<div class="intro">Yllamco laboris nisi ut aliquip ex ea commodo.</div>
</div><!-- /.title-content -->
<div class="card-info">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.
</div><!-- /.card-info -->
<div class="utility-info">
<ul class="utility-list">
<li class="comments">12</li>
<li class="date">03.12.2015</li>
</ul>
</div><!-- /.utility-info -->
<!-- overlays -->
<div class="gradient-overlay"></div>
<div class="color-overlay"></div>
</div><!-- /.blog-card -->
</body>
</html>
这是我的 CSS
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700);
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic);
// variables
$card-width: 350px;
$card-height: 500px;
$h-color: #9CC9E3;
$yellow: #D0BB57;
$txt-color: #DCE3E7;
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
background: #323c41;
}
.blog-card{
width: $card-width;
height: $card-height;
position: absolute;
top: 50%;
left: 50%;
margin: -250px 0 0 -175px;
overflow: hidden;
border-radius: 10px;
box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);
text-align: center;
&.spring-fever{
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1765/bg-blog-card.jpg) no-repeat;
}
.color-overlay{
/* Rectangle 11: */
background: rgba(84,104,110,0.4);
width: $card-width;
height: $card-height;
position: absolute;
z-index: 10;
top: 0;
left: 0;
transition: background .3s cubic-bezier(.33,.66,.66,1);
}
.gradient-overlay{
/* bg-gradient: */
background-image: -webkit-linear-gradient(rgba(0,0,0,0.00) 0%, rgba(0,0,0,.6) 21%);
background-image: -moz-linear-gradient(rgba(0,0,0,0.00) 0%, rgba(0,0,0,.6) 21%);
background-image: -o-linear-gradient(rgba(0,0,0,0.00) 0%, rgba(0,0,0,.6) 21%);
background-image: linear-gradient(rgba(0,0,0,0.00) 0%, rgba(0,0,0,.6) 21%);
width: $card-width;
height: $card-height;
position: absolute;
top: 350px;
left: 0;
z-index: 15;
}
&:hover{
.card-info{
opacity: 1;
bottom: 120px;
}
.color-overlay{
background: rgba(84,104,110,0.8);
}
}
}
.title-content{
text-align: center;
margin: 70px 0 0 0;
position: absolute;
z-index: 20;
width: 100%;
top: 0;
left: 0;
}
h3{
font-size: 20px;
font-weight: 500;
letter-spacing: 2px;
color: $h-color;
font-family: 'Roboto', sans-serif;
margin-bottom: 0;
}
hr{
width: 50px;
height: 3px;
margin: 20px auto;
border: 0;
background: $yellow;
}
.intro{
width: 170px;
margin: 0 auto;
color: $txt-color;
font-family: 'Droid Serif', serif;
font-size: 13px;
font-style: italic;
line-height: 18px;
}
.card-info{
width: 100%;
position: absolute;
bottom: 100px;
left: 0;
margin: 0 auto;
padding: 0 50px;
color: $txt-color;
font-family: 'Droid Serif', serif;
font-style: 16px;
line-height: 24px;
z-index: 20;
opacity: 0;
transition: bottom .3s, opacity .3s cubic-bezier(.33,.66,.66,1);
}
.utility-info{
position: absolute;
bottom: 0px;
left: 0;
z-index: 20;
}
.utility-list{
list-style-type: none;
margin: 0 0 30px 20px;
padding: 0;
width: 100%;
li{
margin: 0 15px 0 0;
padding: 0 0 0 22px;
display: inline-block;
color: $txt-color;
font-family: 'Roboto', sans-serif;
&.comments{
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1765/icon-chat.svg) no-repeat 0 .1em;
}
&.date{
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1765/icon-calendar.svg) no-repeat 0 .1em;
}
}
}
我想在我当地的地方看看，比如从 codepen 看
【问题讨论】：