[英]How can I get my linear-gradient over an image the same size as the image in css?
[英]How can I get my css gradient to work in IE?
http://www.10thplanetjjchicago.com/
一切似乎在Firefox / Chrome / Safari / Opera中都能正常运行。 但是我似乎无法使我的内容div在Internet Explorer中正确显示。 渐变不会显示或截断-但仍会显示文本和内容。 我一直在玩重新排序元素,但我不知道:/
要查看我的代码,只需查看源代码。
CSS被最小化,所以这里是CSS:
body {
background: #080808;
margin: 0;
padding: 0;
}
#bg {
background: linear-gradient(to bottom,#232323,#080808);
background: -moz-linear-gradient(top,#232323,#080808);
background: -ms-linear-gradient(top,#232323,#080808);
background: -o-linear-gradient(top,#232323,#080808);
background: -webkit-linear-gradient(top,#232323,#080808);
background: -webkit-gradient(linear,left top,left bottom,from(#232323),to(#080808));
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#232323',endColorstr='#080808',GradientType=0);
position: absolute;
top: 0;
width: 100%;
height: 531px;
}
.header {
background: #282828;
background: linear-gradient(to bottom,#040404,#282828);
background: -moz-linear-gradient(top,#040404,#282828);
background: -ms-linear-gradient(top,#040404,#282828);
background: -o-linear-gradient(top,#040404,#282828);
background: -webkit-linear-gradient(top,#040404,#282828);
background: -webkit-gradient(linear,left top,left bottom,from(#040404),to(#282828));
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#040404',endColorstr='#282828',GradientType=0);
border: 1px solid #7ba145;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
margin: 50px auto;
width: 900px;
height: 85px;
}
.logo {
border: 0;
opacity: .9;
}
.logo: hover {
opacity: 1;
}
.nav-left,.nav-right {
float: left;
margin-top: 32px;
text-align: center;
width: 338px;
word-spacing: 40px;
}
.nav-middle {
float: left;
margin-top: -48px;
position: relative;
z-index: 2;
}
a.nav-link: link,a.nav-link: visited {
color: #b5ed46;
font: 18px impact,tahoma,arial;
text-decoration: none;
opacity: .8;
}
a.nav-link: hover {
color: #eee;
border-bottom: 2px solid #96c34b;
opacity: .9;
}
.background {
text-align: center;
}
.bg-img {
border-left: 1px solid #96c34b;
border-right: 1px solid #96c34b;
margin-top: -50px;
opacity: .9;
}
.bg-img: hover {
opacity: 1;
}
.main {
background: #303030;
background: linear-gradient(to bottom,#171717,#303030);
background: -moz-linear-gradient(top,#171717,#303030);
background: -ms-linear-gradient(top,#171717,#303030);
background: -o-linear-gradient(top,#171717,#303030);
background: -webkit-linear-gradient(top,#171717,#303030);
background: -webkit-gradient(linear,left top,left bottom,from(#171717),to(#303030));
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#171717',endColorstr='#303030',GradientType=0);
border: 1px solid #96c34b;
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
margin: -4px auto;
padding: 32px 32px 16px;
width: 836px;
}
.content {
float: left;
}
.title {
color: #96c34b;
font: 18px impact,tahoma,arial;
opacity: .9;
word-spacing: 3px;
}
.title: hover {
color: #eee;
border-bottom: 2px solid #96c34b;
}
a: link,a: visited {
color: #b5ed46;
text-decoration: none;
}
a: hover {
text-decoration: underline;
}
p {
color: #eee;
font: 12px tahoma,arial;
line-height: 15px;
margin-bottom: 20px;
opacity: .8;
text-align: justify;
width: 550px;
word-spacing: 3px;
}
.side-panel {
color: #efefef;
float: right;
font: 11px tahoma,arial;
line-height: 14px;
margin-bottom: 20px;
opacity: .9;
text-align: justify;
width: 250px;
word-spacing: 3px;
}
p: hover {
color: #efefef;
opacity: .9;
}
.side-panel: hover {
color: #fff;
}
.copyright {
color: #ddd;
clear: both;
font: 10px tahoma,arial;
text-align: center;
opacity: .8;
}
.copyright: hover {
color: #efefef;
opacity: .9;
}
您的CSS很难阅读(至少在变长时尝试换行),但是乍一看似乎您已经涵盖了所有基础。 您可以查看以下示例渐变(高对比度灰色AKA黑色玻璃):
background: #959595; /* Old browsers */
background: -moz-linear-gradient(top, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#959595), color-stop(46%,#0d0d0d), color-stop(50%,#010101), color-stop(53%,#0a0a0a), color-stop(76%,#4e4e4e), color-stop(87%,#383838), color-stop(100%,#1b1b1b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* IE10+ */
background: linear-gradient(to bottom, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=0 ); /* IE6-9 */
我不尝试编写渐变代码,因为同时更改所有这些值总是很痛苦。 试试这个: http : //www.colorzilla.com/gradient-editor/ (这是我从中偷取该渐变的地方)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.