小编adr*_*ift的帖子
Retina显示,高分辨率背景图像
这可能听起来像一个愚蠢的问题.
如果我使用这个CSS片段进行常规显示(其中box-bg.png200px乘200px);
.box{
background:url('images/box-bg.png') no-repeat top left;
width:200px;
height:200px
}
如果我使用这样的媒体查询来定位视网膜显示(使用@ 2x图像作为高分辨率版本);
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.box{background:url('images/box-bg@2x.png') no-repeat top left;}
}
我是否需要将.boxdiv 的大小加倍到400px乘以400px以匹配新的高分辨率背景图像？
推荐指数
解决办法
查看次数
如何更改textarea的边框颜色:焦点
原谅我这是一个愚蠢的问题,但我需要帮助.我想在焦点上改变TEXTAREA的边框颜色.但我的代码似乎没有正常工作.
请查看小提琴上的代码.
<form name = "myform" method = "post" action="insert.php" onsubmit="return validateform()" style="width:40%">
<input type="text" placeholder="Enter Name." name="name" maxlength="300" class="input">
<input type="email" placeholder="Enter E-mail." name="address" maxlength="300" class="input">
<textarea placeholder="Enter Message." name="descrip" class="input" ></textarea>
<br>
<input class="button secondary" type=submit name="submit" value="Submit" >
</form>
这是CSS
.input {
border:0;
padding:10px;
font-size:1.3em;
font-family:"Ubuntu Light","Ubuntu","Ubuntu Mono","Segoe Print","Segoe UI";
color:#ccc;
border:solid 1px #ccc;
margin:0 0 20px;
width:300px;
-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
box-shadow: inner …推荐指数
解决办法
查看次数
如何将Bootstrap 3的glyphicons更改为白色？
我的页面中有字形,但它们是黑色的.如何将glyphicons设置为白色？
推荐指数
解决办法
查看次数
如何将flex-container设置为flex-items的宽度？
我有一个Flex容器justify-content: flex-start.由于柔性物品占用的空间小于容器的尺寸,因此最终会在右侧溢出.
除了在flex容器上设置显式宽度之外,有没有办法只具有相同的width: auto去除溢出？
推荐指数
解决办法
查看次数
将flexbox子项设置为具有不同的高度以占用可用空间
使用两列flexbox布局,如何使不同大小的子项填充所有可用空间,而不是所有具有该行最高子级高度的子项？
我在jsbin上设置了一个说明问题的演示.我希望所有的孩子都能达到包装内容的大小.
#container {
width: 800px;
display: flex;
flex-wrap: wrap;
}
.cell {
width: 300px;
flex; 1 auto;
}
<div id="container">
<div class="cell">
Cells with arbitrarily long content.</div>
<div class="cell">
</div>
<div class="cell">
</div>
<div class="cell">
</div>
<div class="cell">
</div>
</div>
</body>
</html>
推荐指数
解决办法
查看次数
使用Jumbotron容器在Bootstrap 3中输入大于输入的组
我正在用Bootstrap 3输入组试验一个奇怪的行为.当我将一个输入组插件(文本或图标)添加到一个jumbotron内的表单时,输入组高度大于其输入高度.
在这里你可以找到一个JsFiddle和一个问题截图:
<div class="jumbotron">
<h1>Jumbotron with form</h1>
<form>
<div class="input-group">
<input type="text" class="form-control" placeholder="Username">
<span class="input-group-addon">@</span>
</div>
</form>
</div>
http://jsfiddle.net/DTcHh/上的实例
截图: 
我该如何解决这个问题？我正在寻找一个Bootstrap解决方案,但是如果你能帮助我用CSS规则修复它,那将是不可能的.
推荐指数
解决办法
查看次数
动画完成后如何使动画的最后一个关键帧"保持"状态
我尝试了很多次迭代,但它似乎并不想留在最后一个关键帧上.
我不知道我在这里做错了什么.
<style>
#container{
position: relative;
width: 100%;
height: 100%;
background-color: black;
}
#centerhex{
background-image:url(http://i.imgur.com/4sZDtfK.png);
background-repeat:no-repeat;
background-position:center;
height:224px;
width:210px;
position:absolute;
margin-left: -105px;
margin-top: -112px;
top:50%;
left:50%;
}
.fadein{
animation:fadein 1.5s;
animation-timing-function:linear;
animation-delay:1s;
animation-fill-mode:forwards, none
animation-iteration-count: 1
-webkit-animation-iteration-count: 1
-webkit-animation:fadein 1.5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:1s;
-webkit-animation-fill-mode: forwards, none
}
.transtart{
opacity:0
}
@-webkit-keyframes fadein {
0%{opacity:0;}
50%{opacity:1;}
60%{opacity:1;}
100%{opacity:0.2;}
}
@keyframes fadein {
0%{opacity:0;}
50%{opacity:1;}
60%{opacity:1;}
100%{opacity:0.2;}
}
</style>
</head>
<body>
<div id="container">
<div class="fadein transtart">
<div id="centerhex"></div>
</div>
</div>
动画填充应该照顾它,但由于某种原因它不是.任何帮助将不胜感激.
推荐指数
解决办法
查看次数
扩展bootstrap typeahead的宽度以匹配输入字段
我知道这个问题至少被问过三次,但我看到的答案并不是我想要的.我希望增加twitter bootstrap使用其typeahead函数生成的自动完成字段的宽度.我一直在阅读它延伸到覆盖现场的所有文本.也就是说文本越长,自动完成字段越宽.但是我希望它是span6,因为这是我的搜索字段的宽度.有任何想法吗？我看到了一些jquery的答案,但我无法遵循它们.
推荐指数
解决办法
查看次数
用css制作渐变背景填充页面
我有这个渐变背景,但我不希望它重复它填充页面的方式,我希望它是一个填充页面的大梯度.
HTML:
<!DOCTYPE html>
<head>
<meta charset = "UTF-8"/>
<title>Home</title>
<link rel="stylesheet" text="text/css" href="css.css">
</head>
<body>
</body>
CSS:
p {
font-family:"Arial Black";
line-height:120%;
}
html {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background: #70bg32;
background-repeat:no-repeat;
background: -webkit-linear-gradient( to left top, blue, red);
background: -moz-linear-gradient( to left top, blue, red);
background: -ms-linear-gradient( to left top, blue, red);
background: -o-linear-gradient( to left top, blue, red);
background: linear-gradient( to left top, blue, red);
}
推荐指数
解决办法
查看次数
尝试在类更改上执行CSS转换
想知道在给某个班级时,是否有办法进行css过渡.我最好的例子是这个网站http://ideaware.co/
向下滚动并且标题变为固定时,它会进行背景颜色更改并具有不透明度.真的很好看.
我正在制作一个模板,我在这里http://www.niviholdings.com/collide/,我想要做的是当<nav>修复后,我希望<ul>向右滑动.
希望我正确解释这一点.
推荐指数
解决办法
查看次数