【发布时间】：2014-07-05 02:08:22
【问题描述】：
我的 CSS 有问题，因为我无法将背景图像设置为固定的 div。下面是我在其中构建了我的 html 页面的 codepen 的链接。我真的不知道如何在代码笔中设置背景图像，这就是我设置背景颜色的原因。我有一个 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>
【问题讨论】：
-
它似乎工作得很好（safari），但你已经在你的css和元素的内联中定义了它。你是在元素上还是在css中改变它？ codepen
标签： css