我的CSS有问题，因为我无法将背景图像设置为固定的div。下面是codepen的链接，我构建了我的html页面。我真的不知道如何在代码笔中设置背景图像，这就是我设置背景颜色的原因。我有一个id为右侧栏的div，它位置固定，我为它设置了背景图像，但它没有显示任何背景。如果我删除固定的位置然后出现背景，但问题是我想要一个滚动灵活性，我得到div固定。
CodePen
http://codepen.io/anon/pen/Lmbtd
HTML
<body>
<div style="width=100%;height=100%;">
<div id="form" style="width: 40%; float:left; height=100%;">
<div id="left-bar">
<input type="text" id="ititle" name="title" placeholder="Title Goes Here">
<br>
<textarea id="tContent" rows="4" cols="50"></textarea>
<br>
<input class="button black" id="submitBtn" type="button" value="Add Me to the Note" onclick="fnSaveContent(event)">
</div>
</div>
<div id="notes" style="width: 60%; float:right;">
<div class="NoteBar">
<p>Notes</p>
</div>
<div id="right-bar" style="
max-height: 100%;
overflow: scroll;
position: fixed;
background: url(../images/bg-right-column.jpg);
/* background-repeat: repeat; */
"><div class="noteContent scdf " id="idc7" style="
background: url(../images/bg-right-column.jpg);
"> <h3>scdf</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <div class="absButton"><span class="x-btn edit" onclick="fnEdit(this,event)">Edit</span> <span class="x-btn delete" onclick="fnDelete(this,event)">Remove</span></div></div><div class="noteContent wd " id="idc6"> <h3>wd</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <div class="absButton"><span class="x-btn edit" onclick="fnEdit(this,event)">Edit</span> <span class="x-btn delete" onclick="fnDelete(this,event)">Remove</span></div></div><div class="noteContent qweqweqwe " id="idc5" style="
background: url(../images/bg-right-column.jpg);
"> <h3>qweqweqwe</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <div class="absButton"><span class="x-btn edit" onclick="fnEdit(this,event)">Edit</span> <span class="x-btn delete" onclick="fnDelete(this,event)">Remove</span></div></div><div class="noteContent re " id="idc4"> <h3>RE</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <div class="absButton"><span class="x-btn edit" onclick="fnEdit(this,event)">Edit</span> <span class="x-btn delete" onclick="fnDelete(this,event)">Remove</span></div></div><div class="noteContent sadsdasd " id="idc3"> <h3>sadsdasd</h3> <p>asdasdasd</p> <div class="absButton"><span class="x-btn edit" onclick="fnEdit(this,event)">Edit</span> <span class="x-btn delete" onclick="fnDelete(this,event)">Remove</span></div></div><div class="noteContent asdasd " id="idc2"> <h3>asdasd</h3> <p>asdas</p> <div class="absButton"><span class="x-btn edit" onclick="fnEdit(this,event)">Edit</span> <span class="x-btn delete" onclick="fnDelete(this,event)">Remove</span></div></div>
</div>
</div>
</div>
</body>
CSS
<style>
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* ------------------------------------------------
CSS Reset Code Starts
-----------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
#left-bar{
width: 400px;
margin: auto;
padding-top: 100px;
}
#right-bar{
margin: auto;
max-height: 100%;
overflow: scroll;
position: fixed;
background: url(../images/bg-right-column.jpg);
}
body{
background: url(../images/skulls.png) repeat;
}
input,textarea {
border: 5px solid white;
width: 375px;
-webkit-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
-moz-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
padding: 15px;
background: rgba(255,255,255,0.5);
margin: 0 0 10px 0;
}
#submitBtn {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #1b9edb) );
background:-moz-linear-gradient( center top, #ededed 5%, #1b9edb 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#1b9edb');
background-color:#ededed;
-webkit-border-top-left-radius:6px;
-moz-border-radius-topleft:6px;
border-top-left-radius:6px;
-webkit-border-top-right-radius:6px;
-moz-border-radius-topright:6px;
border-top-right-radius:6px;
-webkit-border-bottom-right-radius:6px;
-moz-border-radius-bottomright:6px;
border-bottom-right-radius:6px;
-webkit-border-bottom-left-radius:6px;
-moz-border-radius-bottomleft:6px;
border-bottom-left-radius:6px;
text-indent:0;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:50px;
line-height:15px;
width : 416px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
}
#submitBtn:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1b9edb), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #1b9edb 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1b9edb', endColorstr='#ededed');
background-color:#1b9edb;
}
#submitBtn:active {
position:relative;
top:1px;
}
.NoteBar{
height : 50px;
background: rgba(77,77,77,1);
background: -moz-linear-gradient(left, rgba(77,77,77,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(0,0,0,1) 51%, rgba(0,0,0,1) 51%, rgba(18,18,18,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(18,18,18,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(77,77,77,1)), color-stop(12%, rgba(89,89,89,1)), color-stop(25%, rgba(102,102,102,1)), color-stop(39%, rgba(71,71,71,1)), color-stop(51%, rgba(0,0,0,1)), color-stop(51%, rgba(0,0,0,1)), color-stop(60%, rgba(18,18,18,1)), color-stop(76%, rgba(43,43,43,1)), color-stop(91%, rgba(28,28,28,1)), color-stop(100%, rgba(18,18,18,1)));
background: -webkit-linear-gradient(left, rgba(77,77,77,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(0,0,0,1) 51%, rgba(0,0,0,1) 51%, rgba(18,18,18,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(18,18,18,1) 100%);
background: -o-linear-gradient(left, rgba(77,77,77,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(0,0,0,1) 51%, rgba(0,0,0,1) 51%, rgba(18,18,18,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(18,18,18,1) 100%);
background: -ms-linear-gradient(left, rgba(77,77,77,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(0,0,0,1) 51%, rgba(0,0,0,1) 51%, rgba(18,18,18,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(18,18,18,1) 100%);
background: linear-gradient(to right, rgba(77,77,77,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(0,0,0,1) 51%, rgba(0,0,0,1) 51%, rgba(18,18,18,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(18,18,18,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d4d4d', endColorstr='#121212', GradientType=1 );
}
.NoteBar p{
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
Color : white;
padding-top: 12px;
margin-left: 50%;
}
.noteContent{
border-bottom: 1px grey solid;
border-left: 1px rgb(138, 125, 125) solid;
position: relative;
padding-bottom: 10px;
}
.noteContent h3{
padding: 10px 0px 10px 10px;
}
.noteContent p{
padding-left: 10px;
}
.noteContent .absButton{
position: absolute;
top: 10px;
right: 20px;
}
#notes{
background: url(../images/bg-right-column.jpg);
color:white;
}
/*Edit Icon
span.edit {
height: 10px;
width: 6px;
background: #333;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
}
span.edit:after {
content: '';
height: 4px;
width: 6px;
background: #333;
-webkit-border-radius: 2px 2px 0 0;
-moz-border-radius: 2px 2px 0 0;
border-radius: 2px 2px 0 0;
position: absolute;
top: -5px;
left: 0px;
}
span.edit:before {
content: '';
width: 0px;
height: 0px;
border-width: 5px 3px 0 3px;
border-style: solid;
border-color: #333 transparent transparent transparent;
position: absolute;
bottom: -6px;
}
span.delete {
width: 10px;
height: 4px;
background: #333;
margin: 15px 0 0 4px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
span.delete:after {
content: '';
width: 25px;
height: 4px;
background: #333;
position: absolute;
top: 10px;
right: 12px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}*/
.x-btn{
border: none;
color: gold;
font-family: inherit;
font-size: 12px;
background: none;
cursor: pointer;
display: inline-block;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
outline: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
</style>
答案 0 :(得分：0)
看起来您用于背景的图像不可用。我已经在线添加了一些示例图像并应用了相同的图像。背景正常应用。检查以下小提琴链接。
<div id="right-bar" style="
max-height: 100%;
overflow: scroll;
position: fixed;
background: url(http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg);">