Tag: css3

黑色透明覆盖图像hover只有CSS？: 我试图添加一个透明的黑色覆盖图像，只要鼠标hover在图像上只有CSS。这可能吗？我试过这个： http://jsfiddle.net/Zf5am/565/ 但是我不能让div显示出来。 <div class="image"> <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" /> <div class="overlay" /> </div> .image { position: relative; border: 1px solid black; width: 200px; height: 200px; } .image img { max-width: 100%; max-height: 100%; } .overlay { position: absolute; top: 0; left: 0; display: none; background-color: red; z-index: 200; } .overlay:hover { display: block; […]

在边框内放置边框，而不是边框: 我有一个<div>元素，我想把一个边框。我知道我可以写style="border: 1px solid black" ，但是这会在div的两边增加2px，这不是我想要的。我宁愿这个边界从div的边缘-1px。该div本身是100px x 100px，如果我添加一个边框，那么我必须做一些math来使边框出现。有什么办法可以使边框出现，并确保框仍然是100px（包括边框）？

：最后一个孩子没有按预期工作？: 问题在于这个CSS和HTML。这里是一个链接到示例代码jsFiddle 。 HTML <ul> <li class"complete">1</li> <li class"complete">2</li> <li>3</li> <li>4</li> </ul> CSS li.complete:last-child { background-color:yellow; } li.complete:last-of-type { background-color:yellow; } 这些CSS的行不应该用“完整”类的最后一个元素？ jQuery中的这个查询并没有把它作为目标： $("li.complete:last-child"); 但是这个呢： $("li.complete").last(); li { background-color: green; } li.complete:first-child { background-color: white; } li.complete:first-of-type { background-color: red; } li.complete:last-of-type { background-color: blue; } li.complete:last-child { background-color: yellow; } <ul> <li class="complete">1</li> […]

Bootstrap：如何堆叠不同高度的div？: 这个问题有点类似于这个，但是我想知道是否有一个与Bootstrap兼容的纯CSS解决scheme。基本上，我有以下布局：这是该网页的HTML： <div class="menu row"> <div class="menu-category list-group col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="menu-category-name list-group-item active">Category</div><a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a> <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a> <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a> <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a> <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a> <a href="#" class="menu-item […]

如何在纯CSS中创build相等高度的列: 如何让你的div达到一路下降？如何填补父div的垂直空间？如何获得等长的列而不使用背景图片？我花了两天的时间search并parsing代码，以了解如何尽可能简单高效地完成等长列。这是我想出来的答案，我想在一个小教程中与社区复制和粘贴样式分享这些知识。对于那些认为这是重复的，事实并非如此。我受到了几个网站的启发，其中包括http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks，但下面的代码是独一无二的。

是否有可能将CSS @media规则内联？: 我需要dynamic加载横幅图像到HTML5应用程序，并希望有几个不同的版本，以适应屏幕宽度。我无法正确确定手机的屏幕宽度，所以我唯一能想到的方法是添加div的背景图像，并使用@media来确定屏幕宽度并显示正确的图像。例如： <span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span> 这是可能的，还是有没有人有任何其他的build议？

是否有完成CSS3animation的callback？: 有什么办法来实现一个callback函数的情况下css3animation？在Javascriptanimation的情况下，它可能但没有find任何方式来做到这一点在CSS 3。我可以看到的一种方式是在animation持续时间后执行callback，但不能确保在animation结束后总是会调用callback。这将取决于浏览器UI队列。我想要一个更强大的方法。任何线索？

在没有jQuery的HTML和CSS中单击显示隐藏div: 我想要的东西非常类似于位于这里的Theming可折叠标题： http://jquerymobile.com/demos/1.2.0-alpha.1/docs/content/content-collapsible.html 不使用JQuery，这可能吗？这是一个移动网站，但网页总是会脱机，所以我真的不想使用jQuery。也给jquery移动自定义样式比使用纯CSS和自己造型更难。

Internet Explorer 9中的渐变: 有谁知道IE9内的渐变供应商前缀还是我们仍然应该仍然使用他们的专有filter？我得到的其他浏览器是： background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */ 作为奖金有人知道Opera的供应商的前缀呢？