1

我正在尝试使用http://designshack.net/articles/css/build-an-animated-photo-wall-with-css/ 在我的 Rails 应用程序中实现照片墙。我将列表、段落和图像的 CSS 插入到我的 custom.css.scss 中，图像高度和宽度的唯一变化如下：

/* picture wall */

/*------CONTAINER------*/
.container {
  width: 320px;
  margin: 0 auto 50px auto;
}

/*------LIST------*/
.container ul {
  list-style-type: none;
}
 
.container li {
  float: left;
  position: relative;
  width: 280px;
  height: 187px;
  overflow: hidden;
}
 
.container li:hover {
  cursor: pointer;
}

/*------PARAGRAPH------*/
.container li p {
  color: transparent;
  background: transparent;
  font: 200 10px/80px 'Arvo', Helvetica, Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
   
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px; 
 
 
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
 
.container li:hover p {
  color: white;
  background: #000; /*fallback for old browsers*/
  background: rgba(0,0,0,0.7);
}

/*------IMAGES------*/
.container img {
  width: 80px;
  height: 80px;
   
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
 
.container li:hover img {
  width: 100px;
  height: 100px;
}

资产管道在该文件中引发以下错误：

Invalid CSS after "  position:": expected pseudoclass or pseudoelement, was " absolute;"

注释掉位置行会在文件中显示下一行：

Invalid CSS after "  top:": expected pseudoclass or pseudoelement, was " 0;"

语法问题？我不能简单地将有效的 css 放入 scss 文件吗？是什么赋予了？

4

2 回答 2

5

尝试用 . 删除行下方的空格text-transform: uppercase;。

于 2013-07-30T18:35:35.010 回答
0

问题出在空行中！已删除，它不会引发错误。天哪，空行是无效的 CSS 或 SASS ？？？

（代码仍然没有做它应该做的，但这是一个完全不同的问题:-)

于 2013-07-30T18:37:17.123 回答