Tag: css3

在身上设置的CSS3渐变背景不伸展，而是重复？: 确定说<body>内的内容总计300px高。如果我使用-webkit-gradient或-moz-linear-gradient设置我的<body>的背景然后，我最大化我的窗口（或使其高于300像素）渐变将正好300px高（内容的高度），只是重复填补窗口的其余部分。我认为这不是一个错误，因为它在webkit和壁虎都是一样的。但有没有办法让梯度拉伸填补窗口，而不是重复？

为什么Flexbox中的对象不适合工作？: 我有几列，我使用柔性等宽。每个包含img标签，我希望这些图像展示object-fit: cover大小。 .container { display: flex; flex-direction: row; width: 100%; } .test { flex: 1; margin-right: 1rem; overflow: hidden; height: 400px; } img { object-fit: cover; } <div class="container"> <div class="test"><img src="http://placehold.it/1920×1080"></div> <div class="test"><img src="http://placehold.it/1920×1080"></div> <div class="test"><img src="http://placehold.it/1920×1080"></div> <div class="test"><img src="http://placehold.it/1920×1080"></div> </div> 图像没有resize，在这个演示中可以看到。这是为什么？

SASS：从列表中随机挑选背景图像: 我需要输出这个： #footer-widgets .container .row { background-image: url("RANDOMLY PICKED"); background-position: right bottom; background-repeat: no-repeat; } …应该有一个列表4或5链接到实际的背景图像（ http://domain.com/blablabla/image.png ）从中挑选。我怎样才能用SASS做到这一点？

多线柔性线条中断线: 有多种方式可以在多行的flexbox中进行换行吗？例如在这个笔的每个第三项之后打破 .container { background: tomato; display: flex; flex-flow: row wrap; align-content: space-between; justify-content: space-between; } .item { width: 100px; height: 100px; background: gold; border: 1px solid black; font-size: 30px; line-height: 100px; text-align: center; margin: 10px; } .item:nth-child(3n) { background: silver; } <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div […]

有没有办法把列表分成列？: 我的网页有一个“瘦”的列表：例如，一个长度为100个单词的列表。为了减less滚动，我想在页面上显示两个甚至四个列的列表。我应该如何做到这一点与CSS？ <ul> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul> 我更喜欢解决scheme是灵活的，所以如果列表增长到200个项目，我不必做很多的手动调整，以适应新的列表。

检查单选button标签的CSSselect器: 是否可以将css（3）样式应用于选中的单选button的标签？我有以下标记： <input type="radio" id="rad" name="radio"/> <label for="rad">A Label</label> 我所希望的是 label:checked { font-weight: bold; } 会做些什么，但唉，不（如我所料）。有没有一个select器可以实现这种function？如果有帮助的话，你可以用div等包围，但是最好的解决scheme是使用标签“'作为属性。应该指出的是，我可以指定我的应用程序的浏览器，所以请最好的类css3等。

在不同的柔性容器中柔性物品的高度相等的列: 我在创buildFlexbox响应式网格时遇到问题，希望能有人指出我正确的方向。我希望所有.block div的高度相等，而.bottom div完全位于底部。这实际上是在当前的解决scheme，但是当h2标题太长，达到2行，我希望该行的所有h2标题是相同的高度。这在某种程度上可能吗？我做了一个Codepen来说明这个问题： http ://codepen.io/kenvdbroek/pen/eZKdEQ h1, h2, h3 { margin: 0; } body { margin: 0; padding: 0; } ul.clean-list { margin: 0; padding: 0; } ul.clean-list li { list-style: none; margin-bottom: 5px; } li:last-child { margin-bottom: 0; } .container { padding-top: 50px; } .block { margin-bottom: 30px; border: 1px […]

如何在父div中设置不透明度而不影响子div？: 嘿，我在谷歌search，但我不能罚款任何完美的答案我想在父DIV不透明但不是儿童DIV 例 HTML <div class="parent"> <div class="child"> Hello I am child </div> </div> CSS .parent{ background:url('..http://img.dovov.commadu.jpg') no-repeat 0 0; } .child{ Color:black; } 注意： –我想在Parent Div不背景的背景图像

z-index通过设置变换（旋转）来取消: 使用transform属性，z-index被取消并出现在前面。（当注释掉-webkit-transform时，z-index在下面的代码中正常工作） .test { width: 150px; height: 40px; margin: 30px; line-height: 40px; position: relative; background: white; -webkit-transform: rotate(10deg); } .test:after { width: 100px; height: 35px; content: ""; position: absolute; top: 0; right: 2px; -webkit-box-shadow: 0 5px 5px #999; /* Safari and Chrome */ -webkit-transform: rotate(3deg); /* Safari and Chrome */ transform: rotate(3deg); z-index: -1; } […]

jQuery的点击事件不能在iOS中工作: 第二次更新：看起来像我的一个函数（resetFigures）阻止事件处理程序，所以将其移动到绑定函数的结尾进行sorting。更新：我经过一些基本的testing后意识到点击事件正在注册，只是在点击时框没有翻转。我有我的网站在Chrome和Firefox中工作的基本审美function，但它拒绝在iOS上正常运行（在iPhone 4上使用iOS 6.1和使用iOS 4.3.5的iPad上进行testing）。您可以在这里查看网站，当然还有脚本（main.js）： http ：//bos.rggwebdesigns.com/ 我读过iOS没有正确处理jQuery点击事件，但我正在努力找出一个修复。 Stack Overflow上的一些线程提到了live（）方法，但像下面这样实现它（以及向可点击元素添加onclick="" ）似乎并不奏效： $('.card').live('click touchstart', function() { var figure = $(this).children('.back'); var button = figure.find('.button'); var column = $(this).parents().eq(1); $('.column').removeAttr('style'); column.css('z-index', 2000); resetFigures(); if(flipCard(this)){ swoosh.pause(); swoosh.currentTime = 0; swoosh.play(); } }); 我也遇到了这个有趣的解决scheme项目： http : //aanandprasad.com/articles/jquery-tappable/ 。但是，我也没有这样的运气： $('.card').tappable(function() { var figure = $(this).children('.back'); var button […]