小编Mr.*_*ien的帖子
如何使用滚动内容的100%CSS背景图像？
我想创建一个带有背景图像的网站,该网站总是填满整个窗口,即使内容可以垂直滚动.
我使用background-size 创建了这个JSFiddle:cover来将背景图像缩放到窗口.
只要内部的div小于窗口,它就可以工作.如果您垂直滚动,背景图像将不再填充页面,而是显示白色/灰色区域.
所以我的问题是:如何将100%背景图像与滚动内容结合起来？这是我的CSS:
html {
height: 100%;
margin:0px;
background-color:#999999;
background-image: url(http://s22.postimg.org/e03w9stjl/main_bg.png);
background-position:center;
background-repeat:no-repeat;
background-size: cover;
}
body {
min-height: 100%;
margin:0px;
}
#appcontainer {
position: absolute;
background-color: rgba(255, 255, 255, 0.7);
width:560px; height:2220px;
left:20px; top:20px;
}
和HTML:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="appcontainer">
This div causes the background image to stop scaling to the page.
</div>
</body>
</html>
推荐指数
解决办法
查看次数
在JavaScript/jQuery中声明一个包含多行的字符串var
如何在jquery中使用多行声明变量,如
原始变量:
var h = '<label>Hello World, Welcome to the hotel</label><input type="button" value="Visit Hotel"><input type="button" value="Exit">';
我要声明的变量:
var h = '<label>Hello World, Welcome to the hotel</label>
<input type="button" value="Visit Hotel">
<input type="button" value="Exit">';
推荐指数
解决办法
查看次数
Express 中的 req.header 与 req.headers
我正在将 Express 与 Body Parser 一起使用。给定以下标题键：
X-Master-Key
当我使用下面的代码片段时，它无法输出值
req.headers['X-Master-Key'] // Fails
但是当以上更改为时，它起作用了
req.headers['x-master-key'] // Works
此外，当我尝试输出时req.headers，结果发现 Express 以小写格式输出所有标题。
我开始进一步挖掘并尝试使用以下代码，这些片段中的任何一个都有效
req.header('X-Master-Key'); // Works
// -- OR
req.header('x-master-key'); // Works
那么这里有什么问题呢？为什么 Express 将所有标题键更改为小写？此外，如何使用req.header()与req.headers[]?
推荐指数
解决办法
查看次数
如何在图块中浮动具有不同大小的元素
问题很简单.我有一堆要制作瓷砖的元素.然而,其中一些有更长的高度; 让我们说两倍于其他人.我希望所有这些都只是通过纯CSS样式在瓷砖中匹配.
这是我有的:
这就是我想要的:
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
box-shadow: 0 0 1px black inset;
width: 100px;
display: inline-block;
}
#d1,
#d2,
#d4,
#d5,
#d6,
#d8,
#d9{
height: 100px;
background-color: yellow;
}
#d7,
#d3{
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="d1">1</div><div id="d2">2</div><div id="d3">3</div><div id="d4">4</div><div id="d5">5</div><div id="d6">6</div><div id="d7">7</div><div id="d8">8</div><div id="d9">9</div>
</body>
</html>
你可以在JSBin上试一试:http://jsbin.com/usovek/1/edit
笔记:
- 内容是动态的
- 盒子的数量可以变化
- 任何盒子都可以更长.可能更广泛.
- 盒子的宽度或高度总是多个单位.此示例中的单位为50,有些框为50,有些则为100px高.但如果问题解决了任何数量的单位(1,2,3 ... 50px,100px,150px,......)将是完美的
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
CSS转换后的元素是否具有默认的z-index？
我在这里有一个非常基本的例子,我有一个固定的标题与其他元素一个接一个地堆叠,单个元素使用转换transform: rotate(360deg).
因此,当页面滚动时,只有转换后的元素才会越过固定栏,而其他元素则不会.那么问题是变换元素有默认z-index吗？
当您使用
z-index: -1;了.transform_me它的表现正常
CSS
.fixed {
height: 30px;
background: #f00;
position: fixed;
width: 100%;
top: 0;
}
.transform_me {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
span {
display: block;
height: 100px;
}
注意:如果我们使用say
z-index: 999;作为固定div,它将被解决,但这不是我想要的.
推荐指数
解决办法
查看次数
圆角仅在css的某些角上
是否可以使用css创建一个圆角,我只能在一些特定角落而不是所有角落四舍五入？目前我正在使用:
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
但是我没有看到任何指定左上角或其他角落的方法.我希望其他角落保持正方形.
推荐指数
解决办法
查看次数
HTML/CSS:垂直边框重叠水平边框
这是小提琴:http: //jsfiddle.net/AV38G/
HTML
<table>
<tr class="first-line">
<td class="first-column">Some</td>
<td>Foobar</td>
<td>Stuff</td>
</tr>
<tr>
<td class="first-column">foobar</td>
<td>raboof</td>
<td>184</td>
</tr>
<tr>
<td class="first-column">bar</td>
<td>87458</td>
<td>184</td>
</tr>
<tr>
<td class="first-column">874</td>
<td>raboof</td>
<td>foobar</td>
</tr>
</table>
CSS:
/* ACTUAL CSS */
table {
width: 300px;
border-collapse: collapse;
}
tr td.first-column{
border-left: none;
}
tr.first-line {
border-bottom: 3px solid green;
border-top: none;
}
tr.first-line td {
border-left: none;
}
td {
border-left: 3px solid red;
}
tr {
border-top: 3px solid red;
}
丑,对.那么为什么红色边框会覆盖/覆盖绿色边框？
我怎样才能得到"未被触及"的水平绿色边框？(请不要HTML5/CSS3,可访问性目的)
推荐指数
解决办法
查看次数
我可以给标题标签添加颜色和不同的字体吗？
我想知道是否有办法在页面选项卡中为页面标题提供不同的颜色和字体.就像是:
title{ color: red; font: 12px tahoma;}
只是觉得添加到网站会很有趣.我尝试了上面的内容,它在我的CSS文件中不起作用.还尝试给它一个class="title"CSS风格,.title{ color: red; font: 12px tahoma;}但也没有用.
推荐指数
解决办法
查看次数
为什么strtotime(1970年1月1日)在PHP中返回-3600而不是0？
我已经习惯了strtotime过去几秒钟1 January 1970,但是我不明白为什么-3600如果设置时钟12.00AM我会得到,而0当时钟设置为时我会得到1 AM,那么那是什么1 HOUR？这是时区的问题吗？
echo 'I Expect 0 Here '.strtotime('1st January 1970').'<br />';
//This gives me -3600
echo 'I Expect 3600 Here '.strtotime('1st January 1970 01.00AM');
//This gives me 0
PS我没有在我的PHP文件中设置任何时区,或者我甚至没有修改我的.ini文件(Fresh Installed XAMPP)
更新:时区:欧洲/柏林
推荐指数
解决办法
查看次数