Tag: CSS

“英雄”这个类名是从哪里来的？: 一个被广泛采用的CSS命名实践是使用hero作为应用于网站主标题的类名。这个命名约定是从哪里来的，特别是对某些事情的参考？

有没有办法通过网页上的angular色来改变文字“中途”的颜色？: 我在某些桌面应用程序中看到的一件事是，在背景更改时更改文本颜色的能力 – 可以在单个字符上有效地显示多种颜色。我最常见到的进度条显示栏内的百分比。一般来说，较深的背景颜色将被用作进度条的颜色，随着进度的进行，深色与黑色文本的对比度不够，所以文字的颜色会随着文本的重叠而改变。这张图片应该解释我的意思：正如您所看到的，文本在0％时是黑色的 – 当没有深色背景时。当背景图像完全进展到100％时，文本是完全白色的。但在中间，正如你可以看到的50％，文本是半黑/半白，在本例中它实际上是分割为“0”字符。在网页上有没有办法做到这一点？ CSS，图像，JQuery，否则？（最好不是Flash或一个Java小程序，但我真的想知道是否可以使用基于HTML的解决scheme。）谢谢！

带有溢出的CSS圆周的像素化边缘：隐藏;: 这里是我的猫/animationJSFIDDLE 没有任何 drop-shadows以尽可能清楚地显示问题。据我了解，这是由border-radius引起的，可能是由于overflow: hidden; 。猫头鹰是不是这个问题是什么，只是一个类似的情况下我的例子。jsfiddle /猫是这个问题是关于，对不起混乱！这里是一个JSFIDDLE为我的猫与embedded盒阴影使用blur属性的box-shadow和像素化的边缘仍然是在眼睛周围相同。这里的答案确实解决了我用猫头鹰形象所看到的东西，而不是为了解答这个问题。这里是使用第三个值， blur的inset box-shadow的猫。我已经在Safari，Chrome和Firefox上testing了这个小提琴，它们似乎都是一样的。我有两只眼睛，我昨天从CSS开始制作的柴郡猫。一切都呈现得很好，我也做了一个猫头鹰（我第一次认为这是一个类似的情况，但它不是）的CSS有一个非常小的但类似的问题，在边缘像素化的眼睛。我也试图给眼睛一个紫色的边界，但像素边缘在边界边缘保持不变。在我的新CSS创build时，眼睛的外边缘非常像素化，似乎是父圆圈的颜色（黄色）。这是眼睛的CSS。 .eye { border-radius: 50%; height: 100px; width: 100px; background: #FAD73F; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; overflow: hidden; position: relative; display: inline-block; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4); z-index: 100; […]

创build页面页眉和页脚使用CSS进行打印: 我使用Flying Saucer（将CSS / HTML转换为iText为PDF）创buildPDF，我试图使用CSS3将图像页眉和页脚应用到每个页面。我基本上想把这个div放在每个页面的左上angular： <div id="pageHeader"> <img src="…" width="250" height="25"/> </div> 我的CSS看起来有点像这样： @page { size: 8.5in 11in; margin: 0.5in; @top-left { content: "Hello"; } } 有没有办法让我把这个div的content ？

有没有办法让网页页眉/页脚印在每一页上？: 根据我的研究，似乎我想要做的事情是不可能的，但是如果有什么变化的话，我想查看是否有人想出办法做到这一点。我有一个networking应用程序，可以根据浏览器窗口中的用户select生成打印报告。我有一个自定义页眉和页脚，当从浏览器打印报告时，应该在每个打印页面上重复。这不是我需要的浏览器页眉和页脚，而是我生成的自定义页眉和页脚。另外，我不认为这是一个CSS和媒体types的问题，但我不是一个CSS专家。我没有问题得到页眉和页脚打印一次，但我不能让他们打印在每一页上。我读过，也许如果我使用表重新创build我的报告页面，然后使用表头标签和CSS，至less可以在每个页面上获取标题。我还没有成功，但如果它是唯一的select，我会再试一次。一位同事build议我在我的php中计算行数，并根据需要手动输出页眉和页脚。我想这是一个选项，但它似乎应该有办法做到这一点，不是那么“蛮力”！另一个警告是，我必须支持IE 6，所以我怀疑一些我尝试的CSS的东西只是不被支持。如果有人知道有什么办法做到这一点，那就太棒了！如果没有，我将不得不重新思考我的方法。提前致谢！更新（2011年12月14日）我在这个问题上取得了相当大的进展，利用答案中的一些信息，我产生了可用的报告，但从来没有像我想要的那么好或专业。页脚往往不够接近页面的底部，我不得不做大量的猜测工作和“脆弱”的计算，以确定如何插入分页符的大文本，我只能支持限制页面格式设置，以及对报告所做的任何更改都会导致代码更改的级联和更脆弱的计算。总有一种情况打破了某些报告的某些部分。我们修改了这些要求，现在正在使用TCPDF生成PDF格式的报告。这个文档有点不透明，需要一些实验，但是结果要好得多，而且现在的报告看起来应该是这样。我会对任何试图从浏览器进行HTML报告的人说，除非它们非常简单，不用担心（像其他人告诉我的那样），并使用PDF或类似的东西。

在CSS3中设置旋转点？: 是否可以在CSS3中设置旋转点？默认的旋转点是50％，50％。我试过了： -webkit-transform: rotate(230deg); -webkit-rotation-point:90% 90%; 但它不工作…有什么build议吗？

什么是一个react.js友好的方式来animation列表重新sorting？: 我有一个项目列表，按分数sorting，由react.js呈现为垂直方向的矩形项目列表（最高分）。对单个项目的盘旋和其他点击可以显示/隐藏额外的信息，改变它们的垂直高度。新的信息到达，稍微改变分数，使得一些项目在重新sorting之后排名更高，而其他更低。我希望这些物品能够同时生成新的位置，而不是立即出现在新的位置。在React.js中是否有推荐的方法来做到这一点，也许有一个stream行的附加？（在使用D3的类似的过去的情况下，我使用的技术大致是：按照自然顺序显示具有项目DOM节点的列表，并进行相对定位。在相对定位的情况下，其他小的变化 – CSS或JS触发 – 个别项目的范围将按预期转移其他人。在一个步骤中，使所有的DOM节点都变为实际的相对坐标作为新的绝对坐标 – 一个DOM变化，不会引起视觉变化。在其父代中，将项目DOM节点重新sorting为新的sorting顺序 – 另一个DOM更改不会导致可视的更改。根据新sorting中所有前面项目的高度，将所有节点的顶部偏移量animation到新的计算值。这是唯一直观的步骤。将所有项目的DOM节点变回无偏移的相对定位。同样，这不会导致视觉上的改变，但是现在相对定位的DOM节点，在底层列表的自然顺序中，将通过适当的移位来处理内部hover/展开/ etc样式的改变。现在我希望以React-ish的方式获得类似的效果…）

如何缩放，使容器也增长和占用空间: 所以我有一个容器，我想要扩大和缩小（放大和缩小），但也有扩大/缩小的forms占用空间，而不是重叠其他的东西。更新有一个图像，有absolute div放置在坐标，他们必须保持其上下相对位置（因此为什么我使用规模）。 var b = document.getElementById("outer"); var scale = 1; function increase() { scale += 0.1 b.style.transform = `scale(${scale})`; } function decrease() { scale -= 0.1 b.style.transform = `scale(${scale})`; } #outer { overflow-x: auto position: relative; transform-origin: left top; } .pointer { width: 20px; height: 20px; background-color: orange; position: absolute; } #a1 { […]

CSS水平表单元格间距：怎么样？: 希望这是一个容易的，但我还没有find一个解决scheme。我想在桌子上的列之间放置空间。例 | Cell |<- space ->| Cell |<- space ->| Cell | 重要的一点是，我不想在边缘空间。有一个border-spacing属性，但在IE（6或7）中不支持，所以不好。它也把空间放在边缘。我提出的最好的方法是在我的表格单元格上加上padded-right：10px，然后向最后一个单元格添加一个类以删除填充。这是不太理想的，因为额外的空间是不在其外的单元的一部分。我想你可以用透明的边框做同样的事情？我也尝试使用jQuery： $(function() { $("table > tbody > tr:not(:last-child").addClass("right-padding"); }); 但是即使在只有〜100行的桌子上，在某些情况下也需要200-400毫秒，这太慢了。任何帮助赞赏。谢谢对于那些build议列他们不工作。尝试这个： <html> <head> <title>Layout</title> <style type="text/css"> table { border: 1px solid black; } td { background: yellow; } </style> </head> <body> <table> […]