我只是尝试采用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中一样在我的本地看到
答案 0 :(得分：1)
创建密码笔的人使用了SCSS（或Sass）。您需要将该代码编译为CSS。通过在CSS窗口中单击下拉菜单并选择“查看已编译的CSS”，可以在Codepen中完成此操作。我复制并粘贴下面编译的css和html：
@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);
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #323c41;
}
.blog-card {
width: 350px;
height: 500px;
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, 0.5);
text-align: center;
}
.blog-card.spring-fever {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1765/bg-blog-card.jpg) no-repeat;
}
.blog-card .color-overlay {
/* Rectangle 11: */
background: rgba(84, 104, 110, 0.4);
width: 350px;
height: 500px;
position: absolute;
z-index: 10;
top: 0;
left: 0;
transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}
.blog-card .gradient-overlay {
/* bg-gradient: */
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 21%);
background-image: -moz-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 21%);
background-image: -o-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 21%);
background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 21%);
width: 350px;
height: 500px;
position: absolute;
top: 350px;
left: 0;
z-index: 15;
}
.blog-card:hover .card-info {
opacity: 1;
bottom: 120px;
}
.blog-card:hover .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: #9CC9E3;
font-family: 'Roboto', sans-serif;
margin-bottom: 0;
}
hr {
width: 50px;
height: 3px;
margin: 20px auto;
border: 0;
background: #D0BB57;
}
.intro {
width: 170px;
margin: 0 auto;
color: #DCE3E7;
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: #DCE3E7;
font-family: 'Droid Serif', serif;
font-style: 16px;
line-height: 24px;
z-index: 20;
opacity: 0;
transition: bottom 0.3s, opacity 0.3s cubic-bezier(0.33, 0.66, 0.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%;
}
.utility-list li {
margin: 0 15px 0 0;
padding: 0 0 0 22px;
display: inline-block;
color: #DCE3E7;
font-family: 'Roboto', sans-serif;
}
.utility-list li.comments {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1765/icon-chat.svg) no-repeat 0 0.1em;
}
.utility-list li.date {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1765/icon-calendar.svg) no-repeat 0 0.1em;
}<!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>