小编Ket*_*tri的帖子

不是一个母语为英语的人,所以可能有更好的方法来塑造这个问题......无论如何:

我想要创建的内容类似于此处的标题:http://thegreatdiscontent.com/adam-lisagor 标题图像在所有屏幕尺寸中完全显示,图像的宽高比当然总是正确的.这是使用并使文本出现在使用位置:绝对.

但是如果你使用css作为背景图像而不是a,你会得到类似这样的标题:http://elegantthemes.com/preview/Harmony/ 调整浏览器大小以查看背景的部分内容.

是否可以使用像第二个链接上的background-image css属性来创建一个div看起来和行为类似第一个链接？或者我是否必须更改整个标题的工作方式并使用背景为其在所有屏幕大小中完全显示？

我希望有一个标题背景,不会泄漏任何东西,但是像这样的http://getflywheel.com/固定 到目前为止唯一的想法是制作一个具有正确的图像比例的透明png,然后使用具有背景附件的background-image:fixed.但这似乎并不聪明.

希望我很清楚,我会理解.非常感谢大家!

我想在悬停时模糊图像.

问题是图像的边缘也会令人不快地模糊.在小提琴中你可以清楚地看到绿色背景.

如果我缩放图像即1.2,它最终会解决问题,但在过渡期间仍会出现模糊边缘.

任何想法如何有这种效果的尖锐边缘？

http://jsfiddle.net/d8Njs/

HTML:

<div class="item">
   <img src="http://placekitten.com/300"/>
</div>

CSS:

.item {
overflow: hidden;
width:300px;
height: 300px;
background: green;
}

.item img{
transition:all .5s ;
}

.item img:hover{
-webkit-filter: blur(5px);
/*skaling the image would help, but it still looks bad during the transition
-webkit-transform:scale(1.2); */
}

如果已经没有,我会非常感激,如果有人可以自己做一些如何制作视网膜和非视网膜CSS精灵的说明.如果可能,最好在过程中使用一些CSS sprite -generator.

与主题相关:http://miekd.com/articles/using-css-sprites-to-optimize-your-website-for-retina-displays/

谢谢大家!

我想这样做:http://www.youtube.com/watch？v = ll3Clk-kz3s但输出rems(带px后备)而不是ems.

显然这个https://github.com/chriseppstein/compass/pull/896被添加到指南针并且应该以某种方式工作,但我不能从http://compass-style.org/reference/得到我需要的东西.指南针/排版/ vertical_rhythm /到我的.scss -file来制作它.

如果我只是将https://gist.github.com/ry5n/2026666中的代码作为mixin(即使没有Compass)也可以使用:

@include set-font-size()

代替:

@include adjust-font-size-to()

它与rem值和px后备功能完美配合.

但是,如果我只是尝试使用Compass并继续使用

$font-unit: 1rem;
$relative-font-sizing: false;

它工作但没有px后备.

如果有人可以将Vertical Rhythm所需的完整.scss代码与Rems一起使用,我会非常感激.

为什么我需要$ relative-font-sizing:如果我使用Rems,则为false？另外,除了将文本添加到这样的网格之外,还有一些关于垂直节奏的竞争哲学吗？你更喜欢哪一个,你的工作流程是什么？

非常感谢你提前.

http://isotope.metafizzy.co/docs/help.html说：

第一项打破砌体布局

使用 Masonry 布局模式 如果您遇到重新调整第一个项目大小的问题，并且所有其余项目不再适合在网格中，您很可能需要设置 columnWidth 选项。如果没有设置 columnWidth，砌体布局模式将使用第一个项目的宽度作为其列的大小。

$('#container').isotope(
  masonry: {
    columnWidth: 220
  }
});

这就是我目前正在做的事情。但是我想要一些改变 columnWidth 的 CSS 媒体查询。因此，如果我的第一个 Isotope-item 具有正常的 1x 宽度，我可以只在 CSS 中指定项目的宽度，Isotope 将从那里获取 columnWidth 并工作。但是因为我的第一个项目有 2x 宽度，我必须像上面的代码一样指定列宽，当然我不能再用 CSS 更改它。

那么是否有可能例如：

• 使同位素从具有 1x 宽度的第二个项目中获取 columnWidth？
• 进行某种黑客攻击，因此实际上我将有一个 1x 宽的项目作为第一个项目，但会使用 display:none 或其他方式设置隐藏它？
• 将 Isotope columnWidth 设置为第一个项目的宽度（2x 宽）减去 10px 并除以 2？

greeting_dialog_display 不工作。还是我误解了什么..？我已经设置了 greeting_dialog_display="hide"，但弹出窗口仍然显示。

[参见 codepen 问题的现场示例][1]

[分叉和编辑笔][2]

代码示例：

 <!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/fi_FI/sdk/xfbml.customerchat.js#xfbml=1&version=v2.12&autoLogAppEvents=1';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- Your customer chat code -->
<div class="fb-customerchat"
  attribution=setup_tool
  page_id="1160695934081727"
greeting_dialog_display="hide">
</div>

当我下载Bootstrap时,它包括bootstrap.js和bootstrap.min.js -files.我可以使用它们和jQuery.js来使导航栏崩溃,例如就好了.

但是当我从bootstrap网站的任何网站查看源代码时,它总是有这些单独的.js文件:

 <!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-dropdown.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<script src="assets/js/bootstrap-button.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
<script src="assets/js/bootstrap-affix.js"></script>
<script src="assets/js/application.js"></script>

我正在尝试使用链接创建浮动侧边栏,例如http://twitter.github.com/bootstrap/scaffolding.html左侧.

如果我从http://twitter.github.com/bootstrap/scaffolding.html复制源代码,并复制所有这些单独的.js文件,它可以工作,但如果我只是插入

<script type="text/javascript" src="bootstrap/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

它不起作用.向下滚动时,浮动侧边栏保持在顶部并且不会跟随.

当我调查bootstrap.js时,它似乎拥有那些单独的.js文件("bootstrap-transition.js"等)的所有内容,而且我认为bootstrap.js只是获取所有这些javascript功能的一种更简单的方法.

由于我对html很新,我可能会遗漏一些非常基本的东西...但是:

1. 是否可以使用bootstrap.js使用affix.js和scrollSpy.js进行浮动导航,或者我们是否需要包含像bootstrap网站那样的单独文件？

2. 为什么bootstrap网站使用这些单独的文件以及为什么我下载bootstrap时不包括它们？

非常感谢你!