html - Sprite 不工作(背景未调整且链接不存在？)

标签 html css background-image sprite background-position

这太令人沮丧了，因为它曾经可以正常工作，但现在却不行了。我正在使用的网站底部有社交网络按钮。我正在使用背景图像，因此当用户将鼠标悬停在按钮上时，它会从黑白图像变为彩色版本。这以前是有效的，我不记得有什么改变，但现在它不起作用了，这真的很令人沮丧。

这是我的 HTML

<!-- SOCIAL NETWORKING -->
<div class="sn">
    <div class="fb">
        <a href="http://www.facebook.com/obliquedrive"></a>
    </div>
    <div class="tw">
        <a href="http://www.twitter.com/obliquedrive"></a>
    </div>
    <div class="in">
        <a href="http://www.linkedin.com"></a>
    </div>
</div>

还有我的 CSS

.footwrap {
    width: 100%;
    height: 100px;
    background-color: #444;
}
.footer {
    display: block;
    width: 1100px;
    margin: auto;
    height: 100px;
    background-color: #444;
    position: relative;
    bottom: 0px;
}
.comm {
    width: 1050px;
    margin: auto;
    height: 100px;
    font-size: 10px;
    margin-top: 20px;
    text-align: center;
}
.sn {
    width: 120px;
    float: right;
    margin-top: 40px;
    margin-right: 0px;
    display: inline-block;
}
.fb {
    width: 20px;
    height: 20px;
    display: inline-block;
}
.fb a {
    display: block;
    width: 20px;
    height: 20px;
    background-image: url(images/snicons2.jpg);
    background-position: 0px 0px;
}
.fb a:hover {
    background-position: 0px 20px;
}

.tw {
    width: 20px;
    height: 20px;
    display: inline-block;
    padding-left: 10px;
}
.tw a {
    display: block;
    width: 20px;
    height: 20px;
    background-image: url(images/snicons2.jpg);
    background-position: 40px 0px;
}
.tw a:hover {
    background-position: 40px 20px;
}
.in {
    width: 20px;
    height: 20px;
    display: inline-block;
    padding-left: 10px;
}
.in a {
    display: block;
    width: 20px;
    height: 20px;
    background-image: url(images/snicons2.jpg);
    background-position: 20px 0px;
}
.in a:hover {
    background-position: 20px 20px;
}

我添加了 .footwrap 和 .footer 类，因为它们将应用于社交网络按钮，尽管我认为它们没有效果。但以防万一我错过了什么......

还有!!! 悬停时背景不仅没有改变，而且好像那里甚至没有链接。

最佳答案

  1. 不要使用 display:block/inline/inline-block
  2. 背景和位置合二为一更好
  3. 使用边距，而不是填充。
  4. 将完整的 url 添加到悬停图像中
  5. 在悬停图像中添加高度和宽度
  6. 将图像添加到 div，而不是 a
  7. 使用负数，而不是正数。
  8. 确保图像位于http://yoursite.com/images/snicons2.jpg - 如果不是，则相应地更新 URL。

我无法测试它是否有效，因为您需要将完整的 URL 发布到 sprite。 但这是我建议的解决方案:

感谢您提供图片的完整 URL。这是解决方案:

.footwrap {
    width: 100%;
    height: 100px;
    background-color: #444;
}
.footer {
    display: block;
    width: 1100px;
    margin: auto;
    height: 100px;
    background-color: #444;
    position: relative;
    bottom: 0px;
}
.comm {
    width: 1050px;
    margin: auto;
    height: 100px;
    font-size: 10px;
    margin-top: 20px;
    text-align: center;
}
.sn {
    width: 120px;
    float: right;
    margin-top: 40px;
    margin-right: 0px;
}
.fb {
    margin-left: 10px;
    float: left;
    width: 20px;
    height: 20px;
    background: url(http://thewolv.es/Website/images/snIcons2.jpg) 0px 0px no-repeat;
}
.fb:hover {
    width: 20px;
    height: 20px;
    background: url(http://thewolv.es/Website/images/snicons2.jpg) 0px -20px no-repeat;
}

.tw {
    margin-left: 10px;
    float: left;
    width: 20px;
    height: 20px;
    background: url(http://thewolv.es/Website/images/snicons2.jpg) -40px 0px no-repeat;
}
.tw:hover {
    width: 20px;
    height: 20px;
    background: url(http://thewolv.es/Website/images/snicons2.jpg) -40px -20px no-repeat;
}
.in {
    margin-left: 10px;
    float: left;
    width: 20px;
    height: 20px;
    background: url(http://thewolv.es/Website/images/snicons2.jpg) -20px 0px no-repeat;
}
.in:hover {
    width: 20px;
    height: 20px;
    background: url(http://thewolv.es/Website/images/snicons2.jpg) -20px -20px no-repeat;
}

在jsbin中:

垂直显示: http://jsbin.com/EburEdu/1/

水平显示: http://jsbin.com/UviHozE/1/

为您 - 为您的网站更换 STYLE.CSS:
(因为你说它不起作用，我更新了你的整个 style.css 样式表。上面的代码工作得很好，我只需要为你的特定站点做一些其他更改，不会影响其他寻求解决方案的人):

html {
    height: 100%;
    border: none;
}
body {
    margin: 0;
    padding: 0;
    min-width: 1100px;
    height: 100%;
    overflow: scroll;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    /* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #FAFAFA 0%, #DDDDDD 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FAFAFA 0%, #DDDDDD 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FAFAFA 0%, #DDDDDD 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FAFAFA), color-stop(1, #DDDDDD));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FAFAFA 0%, #DDDDDD 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #FAFAFA 0%, #DDDDDD 100%);
    background-attachment: fixed;

}
h1 {
    color: #ED1C24;
    font-weight: 700;
    font-size: 38px;
    line-height: 110%;
    letter-spacing: -0.02em;
    margin-top: 60px;
}
h2 {
    color: #222222;
    font-weight: 400;
    font-size: 16px;
    line-height: 70%;
    margin-top: -12px;
}
.color {
    color: #ED1C24;
}
.subtext a {
    text-decoration: none;
    color: #FFFFFF;
}



/*Header*/
#mobilenav {
    display: none;
}
.header {
    width: 100%;
    height: 75px;
    position: fixed;
    display: block;
    top: 0px;
    z-index: 1000;
    background-color: #Fff;
    -webkit-box-shadow: 0px 1px 5px 0px #9a9a9a;
    -moz-box-shadow: 0px 1px 5px 0px #9a9a9a;
    box-shadow: 0px 1px 5px 0px #9a9a9a;
}
.headwrap {
    width: 1050px;
    margin: auto;
    margin-top: 13px;
    min-width: 1100px;
}
.nav {
    width: 750px;
    float: right;
    color: #000;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    margin-top: 8px;
    margin-right: 20px;
    display: inline-block;
}
.nav ul {
    list-style: none;
    float: right;
}
.nav li {
    float: left;
    padding-left: 20px;

}
.nav li a {
    color: #000;
    padding-left: 40px;
    text-decoration: none;
}
.nav li a:hover {
    text-decoration: underline;
}
.nav li a:visited { 
}



/*Content*/
.pagewrap {
    display: block;
    width: 1100px;
    margin: auto;
    margin-top: 0px;
    position: relative;
    padding-bottom: 50px;
}
.content p {
    color: #222222;
    line-height: 140%;
    font-weight: 300;
    font-size: 24px;
    margin-top: -18px;
    font-family: 'Roboto', sans-serif;
}
.intro {
    text-align: left;
    width: 1050px;
    margin: auto;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
}
.intro h1 {
    font-size: 32px;
}
.intro p {
    font-size: 20px;
}
.slider-wrapper {
    padding-top: 150px;
}
section {
    width: 650px;
    margin-left: 50px;
}
.one {
    margin-top: 150px;
}
section h1 {
    padding-top: 75px;
    font-size: 45px;
    font-weight: 300;
}
hr {
    width: 300px;
    height: 1px;
    background-color: #000;
    border: none;
}
.one p, .two p {
    font-size: 12px;
    text-align: left;
    vertical-align: top;
}
.two {
    margin-top: -60px;
}
article {
    padding-top: 15px;
    font-size: 12px;
    font-weight: 400;
    margin: 30px;
    width: 604px;
    font-family: helvetica, sans-serif;
}
.panel {
    width: 300px;
    margin-top: 50px;
    margin-left: 33px;
    float: left;
    height: 150px;
    background-color: #fafafa;
    border-bottom-width: 35px;
    border-bottom-style: solid;
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
    color: #000;
    font-weight: normal;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 150%;
    letter-spacing: normal;
}
.panel h1 {
    font-size: 14px;
    color: #DD282E;
    font-weight: bold;
    padding-top: 0px;
    margin-top: 0px;
    line-height: 150%;
    height: 21px;
}
.panel .text {
    padding: 10px;
    height: 104px;

}
.panel-wrapper {
    height: 150px;
    width: 966px;
    margin: auto;
    font-size: 1em;
}
.panel .subtext {
    margin-top: 35px;
    text-align: right;
    padding-right: 10px;
    color: #ffffff;
    vertical-align: center;
    font-size: 1em;
}
.button, .button2 {
    float: right;
}
#controls {
    float: right;
    margin-top: -60px;
}
#slider {
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
}
article h1 {
    font-size: 26px;
    color: #DD282E;
    font-weight: bold;
    padding-top: 0px;
    margin-top: 0px;
    line-height: 150%;
}




/*Sidebar*/
#sidebar {
    width: 220px;
    float: right;
    margin-right: 88px;
    margin-top: 150px;
    color: #222222;
    line-height: 140%;
    font-weight: 400;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
}
#sidenav {
    height: 100px;
    width: 200px;
    background-color: #FFFFFF;
    padding: 10px;
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
}
#sidenav li {
    list-style: inside;
}
#links {
    width: 200px;
    margin-top: 30px;
    background-color: #FFFFFF;
    padding: 10px;
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
}
#documents {
    width: 200px;
    margin-top: 30px;
    background-color: #FFFFFF;
    padding: 10px;
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
}
#news {
    width: 330px;
    background-color: #FFFFFF;
    padding: 10px;
    margin: auto;
    margin-top: 0px;
}
#news p {
    margin-top: 0px;
}
#sidebar ul {
    list-style: none;
    margin-left: -25px;
}
#sidebar li {
    font-size: 12px;
    font-weight: 400;
    text-align: left;
}
#sidebar a, #sidebar a:visited {
    text-decoration: none;
    color: #39F;
}
#sidebar a:hover, #sidbar a:active {
    text-decoration: underline;
    color: #36F;
}





/*Footer*/
.footwrap {
    width: 100% !important;
    height: 100px !important;
    background-color: #444 !important;
}
.footer {
    display: block !important;
    width: 1100px !important;
    margin: 30px auto !important;
    height: 100px !important;
    background-color: #444 !important;
    position: relative !important;
    bottom: 0px !important;
    font: 14px arial !important;
    color:  #fff !important;
    padding: 20px !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.comm {
    width: 1050px !important;
    margin: auto !important;
    height: 100px !important;
    font-size: 10px !important;
    margin-top: 20px !important;
    text-align: center !important;
}
.sn {
    width: 120px !important;
    float: right !important;
    margin-top: -100px !important;
    margin-right: 0px !important;
}
.fb {
    margin-left: 10px !important;
    float: left !important;
    width: 20px !important;
    height: 20px !important;
    background: url(http://thewolv.es/Website/images/snIcons2.jpg) 0px 0px no-repeat !important;
}
.fb:hover {
    width: 20px !important;
    height: 20px !important;
    background: url(http://thewolv.es/Website/images/snicons2.jpg) 0px -20px no-repeat !important;
}

.tw {
    margin-left: 10px !important;
    float: left !important;
    width: 20px !important;
    height: 20px !important;
    background: url(http://thewolv.es/Website/images/snicons2.jpg) -40px 0px no-repeat !important;
}
.tw:hover {
    width: 20px !important;
    height: 20px !important;
    background: url(http://thewolv.es/Website/images/snicons2.jpg) -40px -20px no-repeat !important;
}
.in {
    margin-left: 10px !important;
    float: left !important;
    width: 20px !important;
    height: 20px !important;
    background: url(http://thewolv.es/Website/images/snicons2.jpg) -20px 0px no-repeat !important;
}
.in:hover {
    width: 20px !important;
    height: 20px !important;
    background: url(http://thewolv.es/Website/images/snicons2.jpg) -20px -20px no-repeat !important;
}

(您的网站完全克隆在 jsbin 中，具有完全正常的 Sprite :http://jsbin.com/OTeMuX/1)

关于html - Sprite 不工作(背景未调整且链接不存在？)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19435036/

上一篇：html - 隐藏表格内容而不将其嵌套在列中

下一篇：javascript - 计数 child + 更改 CSS

相关文章：

css - CSS 模式中的换行和缩进将缩进设置为 kill ring

html - CSS 字体在 Mozilla Firefox、Microsoft Edge 和 Opera 上不起作用

jquery - 背景图像定位

css - 使用 CSS3 旋转背景图像

jquery - 如何通过仅拖动它的一侧来调整 DIV 的大小？

html - 用表格方法制作交互式菜单

html - 因为必要的 div 阻止它们成为 sibling ，所以坚持尝试在其他元素悬停时更改元素？

html - CSS 样式优先级

javascript - jquery循环生成的垂直对齐复选框

ios - Swift - 背景图像不适合(显示所有图像的一小部分)

©2024 IT工具网  联系我们